refactor: simplify color manipulation code

.ci/vrts.sh

@@ -5,6 +5,7 @@
 ###
 source .ci/global_setup.sh
 
+
 VRTS_FILES=$1
 ###
 ### visual testing

.eslintrc.js

@@ -78,6 +78,7 @@ module.exports = {
     'no-restricted-properties': 0, // need to find and filter desired options
     'class-methods-use-this': 0,
     'unicorn/prefer-number-properties': 0,
+    'unicorn/number-literal-case': 0, // use prettier lower case preference
     'global-require': 1,
     'import/no-dynamic-require': 1,
     'no-shadow': 1,

NOTICE.txt

@@ -40,3 +40,38 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
 OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
 TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 THIS SOFTWARE.
+
+---
+This product includes code that is adapted from https://github.com/Myndex/SAPC-APCA
+which is available under a "W3C SOFTWARE NOTICE AND LICENSE" license.
+
+Copyright (c) 2021 W3C® (MIT, ERCIM, Keio, Beihang)
+
+License
+
+By obtaining and/or copying this work, you (the licensee) agree that you have read, understood, and will comply
+with the following terms and conditions.
+
+Permission to copy, modify, and distribute this work, with or without modification, for any purpose and without fee
+or royalty is hereby granted, provided that you include the following on ALL copies of the work or portions thereof,
+including modifications:
+
+    - The full text of this NOTICE in a location viewable to users of the redistributed or derivative work.
+    - Any pre-existing intellectual property disclaimers, notices, or terms and conditions. If none exist,
+    the W3C Software and Document Short Notice should be included, see
+    https://www.w3.org/Consortium/Legal/2015/copyright-software-short-notice.html
+    - Notice of any changes or modifications, through a copyright statement on the new code or document such as
+    "This software or document includes material copied from or derived from [title and URI of the W3C document].
+    Copyright © [YEAR] W3C® (MIT, ERCIM, Keio, Beihang)."
+
+Disclaimers
+THIS WORK IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT
+THE USE OF THE SOFTWARE OR DOCUMENT WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.
+
+COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENT.
+
+The name and trademarks of copyright holders may NOT be used in advertising or publicity pertaining
+to the work without specific, written prior permission. Title to copyright in this work will
+at all times remain with copyright holders.

docs/0-Intro/1-Overview.mdx

@@ -265,154 +265,5 @@ type PointStyleAccessor = (
 
 > Note: When overriding bar or point styles be mindful of performance and these accessor functions will be call on every bar/point is every series. Precomputing any expensive task before rendering.
 
-### Background Colors and Text Contrast
-You can provide the `backgroundColor` of the container that the chart will be placed onto. You can set the `textContrast` to a boolean value or a number. The default `textContrast` is set to 4.5 but you can always disable this or set your own numerical amount.
-
-> Note: This functionality is currently available for Partition charts. Please see the partition background and partition label stories.
-
-```js
-config: {
-  fillLabel: {
-    textInvertible: true,
-    textContrast: true, // can also be set to a number
-  }
-}
-```
-`textInvertible` will have to be set to true for `textContrast` to be set as well. To see an example of where this applies, please see the Partitions Background story within Stylings. Charts are included below but are static.
-If you have `textInvertible` set to true, but do not have `textContrast` set to true, then the red slices, Europe, North America, and Asia, will have white text:
-
-<Chart>
-  <Settings theme={{background : {color: `rgba(155, 155, 155, 1)`}}} />
-  <Partition
-    id="spec_1"
-    data={mocks.miniSunburst}
-    valueAccessor={(d) => d.exportVal}
-    valueFormatter={(d) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
-    layers={[
-      {
-        groupByRollup: (d) => d.sitc1,
-        nodeLabel: (d) => productLookup[d].name,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
-          },
-        },
-      },
-      {
-        groupByRollup: (d) => countryLookup[d.dest].continentCountry.substr(0, 2),
-        nodeLabel: (d) => regionLookup[d].regionName,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
-          },
-        },
-      },
-      {
-        groupByRollup: (d) => d.dest,
-        nodeLabel: (d) => countryLookup[d].name,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
-          },
-        },
-      },
-    ]}
-    config={{
-      partitionLayout: PartitionLayout.sunburst,
-      linkLabel: {
-        maxCount: 0,
-        fontSize: 14,
-      },
-      fontFamily: 'Arial',
-      fillLabel: {
-        valueFormatter: (d) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
-        fontStyle: 'italic',
-        textInvertible: true,
-        textContrast: false,
-        fontWeight: 900,
-        valueFont: {
-          fontFamily: 'Menlo',
-          fontStyle: 'normal',
-          fontWeight: 100,
-        },
-      },
-      margin: { top: 0, bottom: 0, left: 0, right: 0 },
-      minFontSize: 1,
-      idealFontSizeJump: 1.1,
-      outerSizeRatio: 1,
-      emptySizeRatio: 0,
-      circlePadding: 4,
-      backgroundColor: 'rgba(229,229,229,1)',
-    }}
-  />
-</Chart>
-
-
-
-Now if you set the `textContrast` to true as well, these slices also become black in text color:
-
-<Chart>
-  <Settings theme={{background : {color: `rgba(155, 155, 155, 1)`}}} />
-  <Partition
-    id="spec_1"
-    data={mocks.miniSunburst}
-    valueAccessor={(d) => d.exportVal}
-    valueFormatter={(d) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
-    layers={[
-      {
-        groupByRollup: (d) => d.sitc1,
-        nodeLabel: (d) => productLookup[d].name,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
-          },
-        },
-      },
-      {
-        groupByRollup: (d) => countryLookup[d.dest].continentCountry.substr(0, 2),
-        nodeLabel: (d) => regionLookup[d].regionName,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
-          },
-        },
-      },
-      {
-        groupByRollup: (d) => d.dest,
-        nodeLabel: (d) => countryLookup[d].name,
-        shape: {
-          fillColor: (d) => {
-            return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
-          },
-        },
-      },
-    ]}
-    config={{
-      partitionLayout: PartitionLayout.sunburst,
-      linkLabel: {
-        maxCount: 0,
-        fontSize: 14,
-      },
-      fontFamily: 'Arial',
-      fillLabel: {
-        valueFormatter: (d) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
-        fontStyle: 'italic',
-        textInvertible: true,
-        textContrast: true,
-        fontWeight: 900,
-        valueFont: {
-          fontFamily: 'Menlo',
-          fontStyle: 'normal',
-          fontWeight: 100,
-        },
-      },
-      margin: { top: 0, bottom: 0, left: 0, right: 0 },
-      minFontSize: 1,
-      idealFontSizeJump: 1.1,
-      outerSizeRatio: 1,
-      emptySizeRatio: 0,
-      circlePadding: 4,
-      backgroundColor: 'rgba(229,229,229,1)',
-    }}
-  />
-</Chart>
+### Background Color
+You can provide the `backgroundColor` of the container that the chart will be placed onto.

docs/1-Typesofchart/4-Sunburts.mdx

@@ -28,7 +28,6 @@ import {
         {
             groupByRollup: (d) => d.sitc1,
             nodeLabel: (d) => productLookup[d].name,
-            fillLabel: { textInvertible: true },
             shape: {
             fillColor: indexInterpolatedFillColor(interpolatorCET2s),
             },
@@ -52,7 +51,6 @@ The code sample can be found within the details below.
         {
             groupByRollup: (d) => d.sitc1,
             nodeLabel: (d) => productLookup[d].name,
-            fillLabel: { textInvertible: true },
             shape: {
             fillColor: indexInterpolatedFillColor(interpolatorCET2s),
             },
@@ -76,6 +74,6 @@ These props are for the `<Partition/>` component as seen in the code snippet abo
 | layers | Array |  |  |
 | groupByRollup| function | | |
 | nodeLabel | function | | |
-| fillLabel | object { textInvertible : boolean} | | |
+| fillLabel | object | | |
 | shape | object { fillColor: indexInterpolatedFillColor(interpolatorCET2s) }
 

docs/1-Typesofchart/8-Donut.mdx

@@ -28,7 +28,6 @@ import {
     {
         groupByRollup: (d) => d.sitc1,
         nodeLabel: (d) => productLookup[d].name,
-        fillLabel: { textInvertible: true },
         shape: {
         fillColor: indexInterpolatedFillColor(interpolatorCET2s),
         },
@@ -69,7 +68,6 @@ import {
     {
         groupByRollup: (d: Datum) => d.sitc1,
         nodeLabel: (d: Datum) => productLookup[d].name,
-        fillLabel: { textInvertible: true },
         shape: {
         fillColor: indexInterpolatedFillColor(interpolatorCET2s),
         },

integration/jest.config.js

@@ -14,7 +14,6 @@ const { debug } = require('./config');
 
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest_env_setup.ts'],
-  modulePathIgnorePatterns: ['<rootDir>/node_modules/canvas/.+'],
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.json',

integration/page_objects/common.ts

@@ -8,7 +8,6 @@
 
 import Url from 'url';
 
-import { JSDOM } from 'jsdom';
 import { AXNode } from 'puppeteer';
 
 import { DRAG_DETECTION_TIMEOUT } from '../../packages/charts/src/state/reducers/interactions';
@@ -470,16 +469,6 @@ class CommonPage {
     });
     return accessibilitySnapshot;
   }
-
-  /**
-   * Get HTML for element to test aria labels etc
-   */
-  // eslint-disable-next-line class-methods-use-this
-  async getSelectorHTML(url: string, tagName: string) {
-    await this.loadElementFromURL(url, '.echCanvasRenderer');
-    const xml = await page.evaluate(() => new XMLSerializer().serializeToString(document));
-    return new JSDOM(xml, { contentType: 'text/xml' }).window.document.getElementsByTagName(tagName);
-  }
 }
 
 export const common = new CommonPage();

integration/tests/styles.test.ts

@@ -11,12 +11,12 @@ import { common } from '../page_objects/common';
 describe('Styles', () => {
   it('should hide the value label with 0 borderWidth', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-textInverted=&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
+      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-useBorder=&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
     );
   });
   it('should hide the value label with 0 textBorder', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-textInverted=true&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
+      'http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide clipped value=&knob-debug=&knob-useBorder=true&knob-value color=rgba(0,0,0,1)&knob-value border color=rgba(0,0,0,1)&knob-value border width=0&knob-Fixed font size=10&knob-Use fixed font size=&knob-Max font size=25&knob-Min font size=10&knob-offsetX=0&knob-offsetY=0&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0',
     );
   });
 });

package.json

@@ -83,7 +83,6 @@
     "@types/core-js": "^2.5.2",
     "@types/d3-array": "^1.2.6",
     "@types/d3-collection": "^1.0.8",
-    "@types/d3-color": "^1.2.2",
     "@types/d3-interpolate": "^1.3.1",
     "@types/d3-scale": "^2.1.1",
     "@types/d3-shape": "^1.3.1",

packages/charts/api/charts.api.md

@@ -687,8 +687,6 @@ export type DisplayValueStyle = Omit<TextStyle, 'fill' | 'fontSize'> & {
         borderColor?: Color;
         borderWidth?: number;
     } | {
-        textInvertible: boolean;
-        textContrast?: number | boolean;
         textBorder?: number;
     };
     alignment?: {
@@ -2441,8 +2439,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // src/chart_types/heatmap/layout/types/config_types.ts:19:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:47:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:48:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:139: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:140: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:136: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:137:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/charts/package.json

@@ -38,7 +38,6 @@
     "d3-array": "^1.2.4",
     "d3-cloud": "^1.2.5",
     "d3-collection": "^1.0.7",
-    "d3-color": "^1.4.0",
     "d3-interpolate": "^1.4.0",
     "d3-scale": "^1.0.7",
     "d3-shape": "^1.3.4",

packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import chroma from 'chroma-js';
-
+import { getGreensColorScale } from '../../../../common/color_library_wrappers';
 import { Pixels, PointObject } from '../../../../common/geometry';
 import { SpecType } from '../../../../specs/constants';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
@@ -71,8 +70,7 @@ export const defaultGoalSpec = {
   ...commonDefaults,
   bands: [50, 75, 100],
   bandFillColor: ({ value, highestValue, lowestValue }: BandFillColorAccessorInput) => {
-    const func = chroma.scale(chroma.brewer.Greens).gamma(0.5).domain([highestValue, lowestValue]);
-    return func(value).css();
+    return getGreensColorScale(0.5, [highestValue, lowestValue])(value);
   },
   tickValueFormatter: ({ value }: BandFillColorAccessorInput) => String(value),
   labelMajor: ({ base }: BandFillColorAccessorInput) => String(base),

packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

@@ -7,10 +7,11 @@
  */
 
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
+import { Color } from '../../../../utils/common';
 import { Mark } from '../../layout/viewmodel/geoms';
 
 /** @internal */
-export function renderCanvas2d(ctx: CanvasRenderingContext2D, dpr: number, geomObjects: Mark[]) {
+export function renderCanvas2d(ctx: CanvasRenderingContext2D, dpr: number, geomObjects: Mark[], background: Color) {
   withContext(ctx, () => {
     // set some defaults for the overall rendering
 
@@ -30,7 +31,7 @@ export function renderCanvas2d(ctx: CanvasRenderingContext2D, dpr: number, geomO
 
     renderLayers(ctx, [
       // clear the canvas
-      clearCanvas,
+      () => clearCanvas(ctx, background),
       () => geomObjects.forEach((mark) => withContext(ctx, () => mark.render(ctx))),
     ]);
   });