feat: add 4.5 contrast for text in partition slices

.playground/playground.tsx

@@ -15,16 +15,230 @@
  * KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License. */
-
 import React from 'react';
-import { Example } from '../stories/treemap/6_custom_style';
+import {
+ makeHighContrastColor,
+ combineColors,
+ getContrast,
+} from '../src/chart_types/partition_chart/layout/utils/calcs';
+
+type PlaygroundState = {
+ backgroundColor: string;
+ foregroundColor: string;
+ textColor: string;
+ value: any;
+ opacityColor: number;
+};
+export class Playground extends React.Component<{}, PlaygroundState> {
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ backgroundColor: 'rgba(113, 128, 172, 0.75)',
+ foregroundColor: 'rgba(168, 208, 20, 0.3)',
+ textColor: 'rgba(163, 122, 116, 1)',
+ value: 'rgba(113, 128, 172, 0.75)',
+ opacityColor: 1,
+ };
+ }
+
+ // https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
+ hexToRGB = (hex: string, alpha?: string) => {
+ const r = parseInt(hex.slice(1, 3), 16),
+ g = parseInt(hex.slice(3, 5), 16),
+ b = parseInt(hex.slice(5, 7), 16);
+
+ if (alpha) {
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+ } else {
+ return `rgb(${r}, ${g}, ${b})`;
+ }
+ };
+
+ // https://jsfiddle.net/Mottie/xcqpF/1/light/
+ RGBToHex = (rgba: string) => {
+ if (rgba !== null) {
+ const newRgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+ return newRgba && rgba.length === 4
+ ? `#${`0${parseInt(newRgba[1], 10).toString(16)}`.slice(-2)}${`0${parseInt(newRgba[2], 10).toString(16)}`.slice(
+ -2,
+ )}${`0${parseInt(newRgba[3], 10).toString(16)}`.slice(-2)}`
+ : '';
+ }
+ };
+
+ updateForegroundColor = (event: any) => {
+ this.setState({
+ foregroundColor: this.hexToRGB(event.target.value),
+ });
+ };
+
+ updateTextColor = (event: any) => {
+ this.setState({
+ textColor: this.hexToRGB(event.target.value),
+ });
+ };
+
+ updateColorAlpha = (event: any) => {
+ this.setState({
+ opacityColor: event.target.value,
+ foregroundColor: this.combineOpacityToRGB(this.state.foregroundColor, event.target.value),
+ });
+ };
 
-export class Playground extends React.Component {
+ combineOpacityToRGB = (rgb: string, opacity: string) => {
+ const [r, g, b] = rgb
+ .replace('rgb(', '')
+ .replace(')', '')
+ .split(',');
+ return `${r.trim()}, ${g.trim()}, ${b.trim()}, ${opacity})`;
+ };
  render() {
+ const { backgroundColor, foregroundColor, textColor, value, opacityColor } = this.state;
+ const combinedColors = combineColors(foregroundColor, backgroundColor);
+ const makeContrasted = makeHighContrastColor(textColor, combinedColors, 4.5);
  return (
- <div className="testing">
- <div className="chart">{Example()}</div>
- </div>
+ <form
+ className="background echChart"
+ style={{
+ backgroundColor: backgroundColor,
+ position: 'absolute',
+ width: 425,
+ height: 500,
+ top: 10,
+ left: 10,
+ }}
+ >
+ <div
+ className="foreground"
+ style={{
+ backgroundColor: foregroundColor,
+ position: 'absolute',
+ width: 200,
+ height: 400,
+ top: 10,
+ left: 200,
+ opacity: opacityColor,
+ }}
+ >
+ <label>foreground color input </label>
+ <input
+ type="color"
+ name="foregroundColor"
+ defaultValue={this.RGBToHex(value)}
+ onChange={this.updateForegroundColor.bind(this)}
+ />
+ <br />
+ <input
+ type="range"
+ id="alpha"
+ onChange={this.updateColorAlpha.bind(this)}
+ min="0.3"
+ max="1"
+ step="0.1"
+ defaultValue={this.state.value}
+ />
+ <p
+ style={{
+ paddingTop: 40,
+ paddingBottom: 40,
+ }}
+ >
+ This is the foreground color
+ <br />
+ <br />
+ {foregroundColor}
+ </p>
+ <p
+ className="text"
+ style={{
+ color: textColor,
+ padding: 20,
+ }}
+ >
+ Here is the original text color
+ </p>
+ <label>text color input </label>
+ <input
+ type="color"
+ name="textColor"
+ defaultValue={this.RGBToHex(value)}
+ onChange={this.updateTextColor.bind(this)}
+ />
+ <p
+ className="text"
+ style={{
+ color: makeContrasted,
+ padding: 20,
+ }}
+ >
+ Here is some text with contrasted color
+ </p>
+ <button
+ style={{
+ border: '2px solid black',
+ color: 'lavender',
+ background: 'grey',
+ }}
+ onClick={() => makeHighContrastColor(textColor, combineColors(foregroundColor, backgroundColor))}
+ >
+ Calculate new contrast
+ </button>
+ <br />
+ <br />
+ </div>
+ <div
+ className="showCalculations"
+ style={{
+ position: 'absolute',
+ width: 200,
+ height: 400,
+ top: 40,
+ left: 450,
+ }}
+ >
+ <p
+ style={{
+ paddingBottom: 40,
+ }}
+ >
+ Contrast between original text color and combinedBackground color
+ <br />
+ <br />
+ <b>{getContrast(textColor, combinedColors).toFixed(3)}</b>
+ </p>
+ <p>
+ Contrast between contrast-computed text color and combinedBackground color
+ <br />
+ <br />
+ <b>{getContrast(makeContrasted, combinedColors).toFixed(3)}</b>
+ </p>
+ </div>
+ <div
+ className="combinedforeground"
+ style={{
+ backgroundColor: combineColors(foregroundColor, backgroundColor),
+ position: 'absolute',
+ width: 200,
+ height: 400,
+ top: 10,
+ left: 700,
+ }}
+ >
+ <p
+ style={{
+ margin: 'auto',
+ padding: 10,
+ }}
+ >
+ This is the combined background and container background using the combineColors function
+ <br />
+ <br />
+ The rgba of this div is:
+ <br />
+ <b>{combineColors(foregroundColor, backgroundColor)}</b>
+ </p>
+ </div>
+ </form>
  );
  }
 }

api/charts.api.md

@@ -176,6 +176,14 @@ export interface AxisStyle {
  tickLabelPadding?: number;
 }
 
+// Warning: (ae-missing-release-tag) "BackgroundStyles" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export interface BackgroundStyles {
+ // (undocumented)
+ color: string;
+}
+
 // Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "BarSeries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1403,6 +1411,7 @@ export interface Theme {
  areaSeriesStyle: AreaSeriesStyle;
  // (undocumented)
  axes: AxisConfig;
+ background: BackgroundStyles;
  barSeriesStyle: BarSeriesStyle;
  bubbleSeriesStyle: BubbleSeriesStyle;
  chartMargins: Margins;
@@ -1534,8 +1543,8 @@ export interface XYChartSeriesIdentifier extends SeriesIdentifier {
 
 // Warnings were encountered during analysis:
 //
-// src/chart_types/partition_chart/layout/types/config_types.ts:117:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:118:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:120:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:121:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/specs/index.ts:47:13 - (ae-forgotten-export) The symbol "NodeColorAccessor" needs to be exported by the entry point index.d.ts
 // src/commons/series_id.ts:37:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts