Gh pages v6.1.0 (#344)

* add CODEOWNERS file (#262)

* Bump elliptic from 6.5.2 to 6.5.3 (#266)

Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3.
- [Release notes](https://github.com/indutny/elliptic/releases)
- [Commits](indutny/elliptic@v6.5.2...v6.5.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* bar chart gradient example in docs (#268)

Co-authored-by: Isaac Ezer <isaace@spotify.com>

* Sankey sorting (#269)

* remove deprecated refs definition

This old usage of defining refs via a string is deprecated and seems to break when debugging reactochart using `npm link` locally.

* add Sankey Sorting Function hooks

Co-authored-by: Isaac Ezer <isaace@spotify.com>

* 3.2.0

* v3.2.0 release

* Fix YAxisLabels formatting example (#271)

The current example did not demonstrate label color/weight change, since the final label (`label.text`) never was `20.00`.

* 3.2.1

* 3.2.1 release

* [A11y] add aria-hidden attributes to XYPlot (#273)

* add aria-hidden attributes to XYPlot elements

* more granual application of aria-hidden

* 3.2.2

* Add changelog edit for 3.2.2

* v3.2.2 release

* v3.2.2 release

* Upgrade D3 6.3.1 (#276)

* d3 6.0

* update imports

* make all the things prettier

* restrict d3 import

* remove global d3 imports from specs

Co-authored-by: Isaac Ezer <isaace@spotify.com>

* 4.0.0

* v4.0.0 release

* remove old node versions. Support >=12 (#287)

* remove old node versions. Support >=12

* auto fix audit errors

* remove node 16, build failing

* update package-lock.json

Co-authored-by: Isaac Ezer <isaace@spotify.com>

* Bump lodash from 4.17.15 to 4.17.21 (#285)

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.15...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump elliptic from 6.5.3 to 6.5.4 (#278)

Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.3 to 6.5.4.
- [Release notes](https://github.com/indutny/elliptic/releases)
- [Commits](indutny/elliptic@v6.5.3...v6.5.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* 5.0.0

* v5.0.0 release

* Migrate jsdom tests to jest (#291)

* Create dependabot.yml

* [Infra] Enable a Github Action for CI (#308)

* Create node.js.yml

* remove browser test step

* CI test

* Revert "CI test"

This reverts commit b2c894a.

* Feature/arackis/make work with d3 v7 (#307)

* Install d3, update Jest to transpile d3

* Fix unit tests - negative numbers were using the wrong negative unicode character

* Include d3@6 as acceptable

* Undo whitespace changes in jest config

* fix lockfile

* 6.0.0

* v6.0.0 release

* Accessible Interface for Line/Area Charts (#294)

* A11yInterface in reactochart

* npm run make-docs + render A11yInterface docs

* fix offset bug + more examples

* refactor for simplicity

* revert the styling since the outline wasn't a problem

* A11yInterface Tests

* refactor to use datasetsWithAccessor instead

* rename + doc generation

* wip: refactor of AriaLabelContainer

* fix an example, fix bug with chart

* fix my examples & refactor again

* update package-lock

* 6.1.0

* v6.1.0 release

Co-authored-by: Anita <acmei@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Marko Bonaći <mbonaci@users.noreply.github.com>
Co-authored-by: Erica Hyman <ekhyman@gmail.com>
Co-authored-by: Anita Wang <anitaw@spotify.com>
Co-authored-by: Markus Wagner <71727154+PRTTMPRPHT@users.noreply.github.com>
Co-authored-by: Adam Rackis <arackaf@users.noreply.github.com>

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.1.0 (2022-01-18)
+
+- [#294](https://github.com/spotify/reactochart/pull/294) Accessible Interface for Line/Area Charts
+
 ## 6.0.0 (2021-09-10)
 
 - [#307](https://github.com/spotify/reactochart/pull/307) Enable support for d3 7, and still support 6

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.d017589e49b4f7214f9e.js"></script></body>
+<script type="text/javascript" src="bundle.45bf33ea983f8c1721bc.js"></script></body>
 </html>

docs/src/App.js

@@ -29,6 +29,11 @@ const mainComponents = [
 ];
 
 const xyChartComponents = [
+  {
+    name: 'AriaLabelContainer',
+    path: '/aria-label-container',
+    Component: Docs.AriaLabelContainerDocs,
+  },
   {
     name: 'AreaBarChart',
     path: '/area-bar-chart',

docs/src/docs/AriaLabelContainer/AriaLabelContainerDocs.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ComponentDocs from '../../ComponentDocs';
+import ExampleSection from '../../ExampleSection';
+// autogenerated docs data containing descriptions of this component's props
+import propDocs from './propDocs.json';
+
+const examples = [
+  {
+    id: 'one-dataset',
+    label: 'With One Dataset',
+    codeText: require('./examples/OneDataset.js.example').default,
+  },
+  {
+    id: 'two-dataset',
+    label: 'With Two Datasets',
+    codeText: require('./examples/TwoDatasets.js.example').default,
+  },
+  {
+    id: 'action',
+    label: 'With Interactions',
+    codeText: require('./examples/WithActions.js.example').default,
+  },
+];
+
+export default class AriaLabelContainerExamples extends React.Component {
+  render() {
+    return (
+      <ComponentDocs name="AriaLabelContainer" propDocs={propDocs}>
+        {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
+
+        {examples.map(example => {
+          return <ExampleSection {...example} key={example.id} />;
+        })}
+      </ComponentDocs>
+    );
+  }
+}

docs/src/docs/AriaLabelContainer/examples/OneDataset.js.example

@@ -0,0 +1,32 @@
+const AriaLabelContainerExample = (props) => {
+  const data = _.range(10).map(d => ({
+    x: d,
+    y: Math.round(d * Math.random() * 10)
+  }))
+  return <XYPlot scaleType="linear" width={600} height={350}>
+      <XAxis title="X Axis" />
+      <YAxis title="Y Axis" />
+      <LineChart
+        data={data}
+        x={d => d.x}
+        y={d => d.y}
+        lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
+      />
+      <AriaLabelContainer
+        ariaLabelGenerator={(xValue, datasets) => {
+          const { 0: dataPoint } = datasets;
+          if(xValue){
+            return `xValue, ${dataPoint.x}; yValue, ${dataPoint.y}`
+          }
+        }}
+        datasetWithAccessor={
+          [{
+            data: data,
+            accessor: d => d.x
+          }]
+        }
+       />
+    </XYPlot>;
+};
+
+ReactDOM.render(<AriaLabelContainerExample />, mountNode);

docs/src/docs/AriaLabelContainer/examples/TwoDatasets.js.example

@@ -0,0 +1,55 @@
+const AriaLabelContainerExample = (props) => {
+  const data0 = _.range(10).map(d => ({
+    x: d,
+    y: Math.round(d * Math.random() * 10)
+  }))
+  const data1 = _.range(7).map(d => ({
+    x: d,
+    y: Math.round(d * Math.random() * 10)
+  }))
+
+  const ariaLabelGenerator = (xValue, datasets) => {
+    const { 0: data0Point, 1: data1Point } = datasets;
+    let ariaLabelString = `x Value, ${xValue}`;
+    if(data0Point) {
+      ariaLabelString += `, data0 y Value ${data0Point.y}`;
+    }
+    if(data1Point) {
+      ariaLabelString += `, data1 y Value ${data1Point.y}`;
+    }
+    return ariaLabelString;
+  }
+
+
+  return <XYPlot scaleType="linear" width={600} height={350}>
+      <XAxis title="X Axis" />
+      <YAxis title="Y Axis" />
+      <LineChart
+        data={data0}
+        x={d => d.x}
+        y={d => d.y}
+        lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
+      />
+      <LineChart
+        data={data1}
+        x={d => d.x}
+        y={d => d.y}
+        lineStyle={{stroke: '#2ca02c', strokeWidth: 3}}
+      />
+      <AriaLabelContainer
+        ariaLabelGenerator={ariaLabelGenerator}
+        datasetWithAccessor={[
+          {
+            data: data0,
+            accessor: d => d.x,
+          },
+          {
+            data: data1,
+            accessor: d => d.x,
+          }
+        ]}
+       />
+    </XYPlot>;
+};
+
+ReactDOM.render(<AriaLabelContainerExample />, mountNode);

docs/src/docs/AriaLabelContainer/examples/WithActions.js.example

@@ -0,0 +1,63 @@
+const AriaLabelContainerExample = (props) => {
+  const [selectedValue, setSelectedValue] = React.useState();
+
+  const data = _.range(10).map(d => ({
+    x: d,
+    y: d * 50,
+  }))
+
+  const onMouseMove = ({xValue, yValue}) => {
+    setSelectedValue({ x: xValue, y: yValue });
+  }  
+
+  const onMouseLeave = () => setSelectedValue();
+
+  const onKeyDown = (event, xValue, datasets) => {
+    const dataPoint = datasets[0];
+    switch (event.keyCode) {
+        // enter key code
+        case 13:
+          setSelectedValue(dataPoint);
+          break;
+        default:
+          break;
+      }
+  }
+
+
+  return (<div>
+    <XYPlot
+      scaleType="linear"
+      width={600}
+      height={350}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}>
+        <XAxis title="X Axis" />
+        <YAxis title="Y Axis" />
+        <LineChart
+          data={data}
+          x={d => d.x}
+          y={d => d.y}
+          lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
+        />
+        <AriaLabelContainer
+          ariaLabelGenerator={(xValue, datasets) => {
+            const dataPoint = datasets[0];
+            if(dataPoint) {
+              return `x Value, ${dataPoint.x}; y Value: ${dataPoint.y}`
+            } 
+          }}
+          onKeyDown={onKeyDown}
+          datasetWithAccessor={[
+            {
+              data,
+              accessor: d => d.x
+            }
+          ]}
+        />
+      </XYPlot>
+      {selectedValue && <h3>{`(${selectedValue.x}, ${selectedValue.y})`}</h3>}
+    </div>);
+};
+
+ReactDOM.render(<AriaLabelContainerExample />, mountNode);

docs/src/docs/AriaLabelContainer/propDocs.json

@@ -0,0 +1,66 @@
+{
+  "description": "`AriaLabelContainer` provides a mechanism for keyboard navigation of\n`LineChart` and `AreaChart` graphs within `XYPlot`. This component renders\na rectangle for a given `numFrames` across a Line/Area chart. `numFrames` should\nbe equal to the number of data points in your dataset. Users can navigate to a frame\neither by pressing `Tab`, or through their assistive technology. `AriaLabelContainer`\ntakes an `ariaLabelGenerator`, which generates an aria-label for each frame of the chart.\n[aria-labels](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html#ARIA6-description) are critical for users accessing\nthe web with screenreaders or other assistive technologies.",
+  "displayName": "AriaLabelContainer",
+  "methods": [],
+  "props": {
+    "datasetWithAccessor": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "data": {
+              "name": "arrayOf",
+              "value": {
+                "name": "object"
+              },
+              "required": true
+            },
+            "accessor": {
+              "name": "custom",
+              "raw": "CustomPropTypes.valueOrAccessor.isRequired",
+              "required": true
+            }
+          }
+        }
+      },
+      "required": true,
+      "description": "An array containing n objects in the following shape:\n[{\n   data: Array of your data points, normally used in rendering specific line or area charts\n   accessor: A function used to access the data point on the x axis from the `data` attribute\n             (datum) => number\n}]"
+    },
+    "ariaLabelGenerator": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "A function that takes the xValue at the start of the frame, an array of datapoints at that xValue, and the index of the frame,\nand returns a string to render as an aria label\nfor the specific frame in the Interface.\n\n(xValue, [datapoints], frameIndex) => string"
+    },
+    "onKeyDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "an optional `onKeyDown` event handler to provide for each frame\nwhen selected.\nBest practices are to describe how the user will interact with the chart in\nthe ariaLabelGenerator\n\n(event, xValue, [datapoints]) => void"
+    },
+    "height": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "height of the chart - provided by `XYPlot`"
+    },
+    "width": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "width of the chart - provided by `XYPlot`"
+    },
+    "xScale": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "D3 scale for X axis - provided by XYPlot"
+    }
+  }
+}

docs/src/docs/index.js

@@ -1,32 +1,47 @@
-export {default as AreaBarChartDocs} from './AreaBarChart/AreaBarChartDocs';
-export {default as AreaChartDocs} from './AreaChart/AreaChartDocs';
-export {default as AreaHeatmapDocs} from './AreaHeatmap/AreaHeatmapDocs';
-export {default as BarDocs} from './Bar/BarDocs';
-export {default as BarChartDocs} from './BarChart/BarChartDocs';
-export {default as ColorHeatmapDocs} from './ColorHeatmap/ColorHeatmapDocs';
-export {default as FunnelChartDocs} from './FunnelChart/FunnelChartDocs';
-export {default as HistogramDocs} from './Histogram/HistogramDocs';
-export {default as KernelDensityEstimationDocs} from './KernelDensityEstimation/KernelDensityEstimationDocs';
-export {default as LineChartDocs} from './LineChart/LineChartDocs';
-export {default as MarkerLineChartDocs} from './MarkerLineChart/MarkerLineChartDocs';
-export {default as MeasuredValueLabelDocs} from './MeasuredValueLabel/MeasuredValueLabelDocs';
-export {default as PieChartDocs} from './PieChart/PieChartDocs';
-export {default as RangeBarChartDocs} from './RangeBarChart/RangeBarChartDocs';
-export {default as RangeRectDocs} from './RangeRect/RangeRectDocs';
-export {default as SankeyDiagramDocs} from './SankeyDiagram/SankeyDiagramDocs';
-export {default as ScatterPlotDocs} from './ScatterPlot/ScatterPlotDocs';
-export {default as TreeMapDocs} from './TreeMap/TreeMapDocs';
-export {default as XAxisDocs} from './XAxis/XAxisDocs';
-export {default as XAxisLabelsDocs} from './XAxisLabels/XAxisLabelsDocs';
-export {default as XAxisTitleDocs} from './XAxisTitle/XAxisTitleDocs';
-export {default as XGridDocs} from './XGrid/XGridDocs';
-export {default as XLineDocs} from './XLine/XLineDocs';
-export {default as XTicksDocs} from './XTicks/XTicksDocs';
-export {default as XYPlotDocs} from './XYPlot/XYPlotDocs';
-export {default as YAxisDocs} from './YAxis/YAxisDocs';
-export {default as YAxisLabelsDocs} from './YAxisLabels/YAxisLabelsDocs';
-export {default as YAxisTitleDocs} from './YAxisTitle/YAxisTitleDocs';
-export {default as YGridDocs} from './YGrid/YGridDocs';
-export {default as YLineDocs} from './YLine/YLineDocs';
-export {default as YTicksDocs} from './YTicks/YTicksDocs';
-export {default as ZoomContainerDocs} from './ZoomContainer/ZoomContainerDocs';
+export { default as AreaBarChartDocs } from './AreaBarChart/AreaBarChartDocs';
+export { default as AreaChartDocs } from './AreaChart/AreaChartDocs';
+export { default as AreaHeatmapDocs } from './AreaHeatmap/AreaHeatmapDocs';
+export {
+  default as AriaLabelContainerDocs,
+} from './AriaLabelContainer/AriaLabelContainerDocs';
+export { default as BarDocs } from './Bar/BarDocs';
+export { default as BarChartDocs } from './BarChart/BarChartDocs';
+export { default as ColorHeatmapDocs } from './ColorHeatmap/ColorHeatmapDocs';
+export { default as FunnelChartDocs } from './FunnelChart/FunnelChartDocs';
+export { default as HistogramDocs } from './Histogram/HistogramDocs';
+export {
+  default as KernelDensityEstimationDocs,
+} from './KernelDensityEstimation/KernelDensityEstimationDocs';
+export { default as LineChartDocs } from './LineChart/LineChartDocs';
+export {
+  default as MarkerLineChartDocs,
+} from './MarkerLineChart/MarkerLineChartDocs';
+export {
+  default as MeasuredValueLabelDocs,
+} from './MeasuredValueLabel/MeasuredValueLabelDocs';
+export { default as PieChartDocs } from './PieChart/PieChartDocs';
+export {
+  default as RangeBarChartDocs,
+} from './RangeBarChart/RangeBarChartDocs';
+export { default as RangeRectDocs } from './RangeRect/RangeRectDocs';
+export {
+  default as SankeyDiagramDocs,
+} from './SankeyDiagram/SankeyDiagramDocs';
+export { default as ScatterPlotDocs } from './ScatterPlot/ScatterPlotDocs';
+export { default as TreeMapDocs } from './TreeMap/TreeMapDocs';
+export { default as XAxisDocs } from './XAxis/XAxisDocs';
+export { default as XAxisLabelsDocs } from './XAxisLabels/XAxisLabelsDocs';
+export { default as XAxisTitleDocs } from './XAxisTitle/XAxisTitleDocs';
+export { default as XGridDocs } from './XGrid/XGridDocs';
+export { default as XLineDocs } from './XLine/XLineDocs';
+export { default as XTicksDocs } from './XTicks/XTicksDocs';
+export { default as XYPlotDocs } from './XYPlot/XYPlotDocs';
+export { default as YAxisDocs } from './YAxis/YAxisDocs';
+export { default as YAxisLabelsDocs } from './YAxisLabels/YAxisLabelsDocs';
+export { default as YAxisTitleDocs } from './YAxisTitle/YAxisTitleDocs';
+export { default as YGridDocs } from './YGrid/YGridDocs';
+export { default as YLineDocs } from './YLine/YLineDocs';
+export { default as YTicksDocs } from './YTicks/YTicksDocs';
+export {
+  default as ZoomContainerDocs,
+} from './ZoomContainer/ZoomContainerDocs';

package.json

@@ -8,7 +8,7 @@
     "Erica Hyman <ehyman@spotify.com>",
     "Isaac Ezer <isaace@spotify.com>"
   ],
-  "version": "6.0.0",
+  "version": "6.1.0",
   "main": "index.js",
   "files": [
     "*.js",