diff --git a/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json b/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json new file mode 100644 index 00000000000000..3a6b5971010f40 --- /dev/null +++ b/change/@fluentui-react-charting-7de74a81-afc6-44d4-bf74-78e6f91d3c5a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add support for custom locale for date axis", + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md index a9a36e3d15253f..79cad1a43d4ada 100644 --- a/packages/react-charting/README.md +++ b/packages/react-charting/README.md @@ -28,10 +28,6 @@ To import charting components: import { ComponentName } from '@fluentui/react-charting/lib/ComponentName'; ``` -**Technical Guide** - -Technical information about chart components is available at [Technical details](./TechnicalDetails.md) - **Contributing** Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package. @@ -56,3 +52,87 @@ You could also create issues under the [charting](https://github.com/microsoft/f **Coding Guidelines** Refer fluent [Coding guidelines](https://github.com/microsoft/fluentui/wiki/Coding-Style) + +# Technical details + +**Overview** + +This document describes different chart components in detail. + +This can be used as a guide to use the charts and contribute new functionalities or improvements to the library. + +**Components** + +The charting components are built using following building blocks. + +- Cartesian Charts. + + - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts. + +- Legends. + + - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart. + +- Hover Callouts. + + - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate. + +- Axes. + + - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart. + + - Axes support for different charts + + | Chart | Numeric Axis | Date Axis | String Axis | + | -------------------------- | ------------ | --------- | ----------- | + | Line Chart | Yes | Yes | No | + | Area Chart | Yes | Yes | No | + | Vertical Bar Chart | Yes | No | Yes | + | Vertical Stacked Bar Chart | Yes | No | Yes | + | Grouped Vertical Bar Chart | No | No | Yes | + | Heatmap Chart | Yes | Yes | Yes | + | Horizontal Bar Chart | -- | -- | -- | + | Donut Chart | -- | -- | -- | + | Sankey Chart | -- | -- | -- | + | Tree Chart | -- | -- | -- | + | Sparkline Chart | -- | -- | -- | + + - Axis localization + The axes support 2 ways of localization. + 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer the [javascript localization guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) for usage. + 2. Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 (like [this](https://github.com/d3/d3-time-format/blob/main/locale/en-US.json)). The date axis will use the date range and the multiformat specified in the definition to determine the correct format to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the axis will show months in tick labels and so on. + Specify the custom locale definition in the timeFormatLocale prop. + Refer to the Custom Locale Date Axis example in line chart for sample usage. + +- Event annotations (Available in line charts). + + - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example. + +- Typography. + + - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color. + +- Colors + + - The charts are designed using the accessible color palette defined for the fluent design system. + +- Themes + + - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming) + +- Accessibility. + + - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility. + Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties. + +- RTL Support + + - The charts support RTL languages wherever applicable. + +- Component Styling + + - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library. + +- Details about ticks. + - Tick values are applicable only for date axis. Doesn't work for string or numeric axis. + Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis. diff --git a/packages/react-charting/TechnicalDetails.md b/packages/react-charting/TechnicalDetails.md deleted file mode 100644 index 2100767c26fd97..00000000000000 --- a/packages/react-charting/TechnicalDetails.md +++ /dev/null @@ -1,80 +0,0 @@ -# Technical details - -**Overview** - -This document describes different charts and their components in detail. - -This can be used as a guide to use the charts and contribute new functionalities or improvements to the library. - -**Components** - -The charting components are built using following building blocks. - -- Cartesian Charts. - - - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts. - -- Legends. - - - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart. - -- Hover Callouts. - - - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate. - -- Axes. - - - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart. - - - Axes support for different charts - - | Chart | Numeric Axis | Date Axis | String Axis | - | -------------------------- | ------------ | --------- | ----------- | - | Line Chart | Yes | Yes | No | - | Area Chart | Yes | Yes | No | - | Vertical Bar Chart | Yes | No | Yes | - | Vertical Stacked Bar Chart | Yes | No | Yes | - | Grouped Vertical Bar Chart | No | No | Yes | - | Heatmap Chart | Yes | Yes | Yes | - | Horizontal Bar Chart | -- | -- | -- | - | Donut Chart | -- | -- | -- | - | Sankey Chart | -- | -- | -- | - | Tree Chart | -- | -- | -- | - | Sparkline Chart | -- | -- | -- | - - - Axis localization - The axes support javascript provided localization for numeric and date axis. - Specify the culture and dateLocalizeOptions for date axis to define target localization details. - -- Event annotations (Available in line charts). - - - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example. - -- Typography. - - - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color. - -- Colors - - - The charts are designed using the accessible color palette defined for the fluent design system. - -- Themes - - - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming) - -- Accessibility. - - - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility. - Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties. - -- RTL Support - - - The charts support RTL languages wherever applicable. - -- Component Styling - - - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library. - -- Details about ticks. - - Tick values are applicable only for date axis. Doesn't work for string or numeric axis. - Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis. diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 659b4c90b2f05b..e83f64133c3d37 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -45,6 +45,7 @@ "@types/d3-selection": "1.4.1", "@types/d3-shape": "^1.2.3", "@types/d3-time-format": "^2.1.0", + "@types/d3-time": "^1.1.0", "@fluentui/set-version": "^8.2.2", "d3-array": "1.2.1", "d3-axis": "1.0.8", @@ -55,6 +56,7 @@ "d3-selection": "1.3.0", "d3-shape": "^1.2.0", "d3-time-format": "^2.1.3", + "d3-time": "^1.1.0", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 54b395289f6585..c94bb9f4ec61e2 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -143,6 +143,7 @@ export class CartesianChartBase extends React.Component { return domainValue.toLocaleString(culture, options); }); + } else if (timeFormatLocale) { + const locale: d3TimeFormat.TimeLocaleObject = d3TimeFormat.timeFormatLocale(timeFormatLocale!); + + xAxis.tickFormat((domainValue: Date, _index: number) => { + return multiFormat(domainValue, locale); + }); } tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : ''; diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index c1033d5dc43cd4..611f33250af202 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -19,7 +19,8 @@ "@fluentui/eslint-plugin": "*", "@fluentui/scripts": "^1.0.0", "@fluentui/storybook": "^1.0.0", - "@types/d3-format": "^1.3.1" + "@types/d3-format": "^1.3.1", + "@types/d3-fetch": "^3.0.1" }, "dependencies": { "@fluentui/azure-themes": "^8.4.34", @@ -44,6 +45,7 @@ "@fluentui/theme-samples": "^8.6.34", "@fluentui/utilities": "^8.13.1", "@microsoft/load-themed-styles": "^1.10.26", + "d3-fetch": "3.0.1", "d3-format": "^1.4.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index 533df6c9f23cba..cff790d3677e97 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx @@ -74,6 +74,23 @@ export class AreaChart extends React.Component { and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively.

+

Date Axis localization

+

+ The axes support 2 ways of localization.
+ 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and + dateLocalizeOptions for date axis to define target localization. Refer the + + Javascript localization guide + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels to show in the ticks. For example - If the date range is in days then the axis will show + hourly ticks. If the date range spans across months then the axis will show months in tick labels and so + on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom + Locale Date Axis example in line chart for sample usage. +

} /> diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx index c3ee3963950fab..98f25ef1078521 100644 --- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx +++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx @@ -73,6 +73,23 @@ export class HeatMapChart extends React.Component {

For string y axis use: yAxisStringFormatter

+

Date Axis localization

+

+ The axes support 2 ways of localization.
+ 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and + dateLocalizeOptions for date axis to define target localization. Refer the + + Javascript localization guide + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels to show in the ticks. For example - If the date range is in days then the axis will show + hourly ticks. If the date range spans across months then the axis will show months in tick labels and so + on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom + Locale Date Axis example in line chart for sample usage. +

} /> diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx new file mode 100644 index 00000000000000..fda2ad0695a2c4 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx @@ -0,0 +1,209 @@ +import * as React from 'react'; +import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Toggle } from '@fluentui/react/lib/Toggle'; +import * as d3 from 'd3-fetch'; + +interface ILineChartBasicState { + width: number; + height: number; + allowMultipleShapes: boolean; + customLocale: any; +} + +export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, ILineChartBasicState> { + constructor(props: ILineChartProps) { + super(props); + this.state = { + width: 700, + height: 300, + allowMultipleShapes: false, + customLocale: undefined, + }; + } + + public componentDidMount() { + this._getCustomLocale(); + } + + public render(): JSX.Element { + return
{this._basicExample()}
; + } + + private _onWidthChange = (e: React.ChangeEvent) => { + this.setState({ width: parseInt(e.target.value, 10) }); + }; + private _onHeightChange = (e: React.ChangeEvent) => { + this.setState({ height: parseInt(e.target.value, 10) }); + }; + private _onShapeChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ allowMultipleShapes: checked }); + }; + + private _getCustomLocale = () => { + d3.json('https://unpkg.com/d3-time-format@2/locale/it-IT.json').then(locale => + this.setState({ customLocale: locale }), + ); + }; + + private _basicExample(): JSX.Element { + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + onDataPointClick: () => alert('click on 217000'), + }, + { + x: new Date('2020-04-03T10:00:00.000Z'), + y: 218123, + onDataPointClick: () => alert('click on 217123'), + }, + { + x: new Date('2020-05-05T11:00:00.000Z'), + y: 217124, + onDataPointClick: () => alert('click on 217124'), + }, + { + x: new Date('2020-07-14T00:00:00.000Z'), + y: 248000, + onDataPointClick: () => alert('click on 248000'), + }, + { + x: new Date('2020-11-15T00:00:00.000Z'), + y: 252000, + onDataPointClick: () => alert('click on 252000'), + }, + { + x: new Date('2020-12-06T00:00:00.000Z'), + y: 274000, + onDataPointClick: () => alert('click on 274000'), + }, + { + x: new Date('2021-01-07T00:00:00.000Z'), + y: 260000, + onDataPointClick: () => alert('click on 260000'), + }, + { + x: new Date('2021-02-14T00:00:00.000Z'), + y: 304000, + onDataPointClick: () => alert('click on 300000'), + }, + { + x: new Date('2021-03-09T00:00:00.000Z'), + y: 218000, + onDataPointClick: () => alert('click on 218000'), + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', + }, + onLineClick: () => console.log('From_Legacy_to_O365'), + }, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-04-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-05-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-06-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-09-16T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2021-02-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2021-03-09T00:00:00.000Z'), + y: 298000, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + { + legend: 'single point', + data: [ + { + x: new Date('2020-07-05T00:00:00.000Z'), + y: 282000, + }, + ], + color: DefaultPalette.yellow, + }, + ], + }; + + const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; + const margins = { left: 35, top: 20, bottom: 35, right: 20 }; + + return ( + <> + + + + + +
+ +
+ + ); + } +} diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index eab4e67c391970..d6b485ec5591e9 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -14,6 +14,7 @@ import { LineChartEventsExample } from './LineChart.Events.Example'; import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibility.Example'; import { LineChartGapsExample } from './LineChart.Gaps.Example'; import { LineChartLargeDataExample } from './LineChart.LargeData.Example'; +import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; const LineChartStyledExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx') as string; @@ -22,6 +23,9 @@ const LineChartEventsExampleCode = require('!raw-loader?esModule=false!@fluentui const LineChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx') as string; const LineChartGapsExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx') as string; const LineChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx') as string; +const LineChartCustomLocaleDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx') as string; + +// All line charts locale is impacted. export class LineChartPage extends React.Component { public render(): JSX.Element { @@ -52,6 +56,9 @@ export class LineChartPage extends React.Component + + + } propertiesTables={ @@ -111,6 +118,23 @@ export class LineChartPage extends React.Component and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively.

+

Date Axis localization

+

+ The axes support 2 ways of localization.
+ 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and + dateLocalizeOptions for date axis to define target localization. Refer the + + Javascript localization guide + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels to show in the ticks. For example - If the date range is in days then the axis will show + hourly ticks. If the date range spans across months then the axis will show months in tick labels and so + on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom + Locale Date Axis example in line chart for sample usage. +

} /> diff --git a/yarn.lock b/yarn.lock index 4ba69c65d37704..627c01ffb50de9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5294,6 +5294,18 @@ dependencies: "@types/d3-selection" "*" +"@types/d3-dsv@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311" + integrity sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A== + +"@types/d3-fetch@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.1.tgz#f9fa88b81aa2eea5814f11aec82ecfddbd0b8fe0" + integrity sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw== + dependencies: + "@types/d3-dsv" "*" + "@types/d3-format@^1.3.1": version "1.3.1" resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.3.1.tgz#35bf88264bd6bcda39251165bb827f67879c4384" @@ -5357,6 +5369,11 @@ resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.10.tgz#d338c7feac93a98a32aac875d1100f92c7b61f4f" integrity sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw== +"@types/d3-time@^1.1.0": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.1.1.tgz#6cf3a4242c3bbac00440dfb8ba7884f16bedfcbf" + integrity sha512-ULX7LoqXTCYtM+tLYOaeAJK7IwCT+4Gxlm2MaH0ErKLi07R5lh8NHCAyWcDkCCmx1AfRcBEV6H9QE9R25uP7jw== + "@types/dedent@0.7.0": version "0.7.0" resolved "https://registry.yarnpkg.com/@types/dedent/-/dedent-0.7.0.tgz#155f339ca404e6dd90b9ce46a3f78fd69ca9b050" @@ -9760,6 +9777,11 @@ commander@6.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc" integrity sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA== +commander@7, commander@^7.0.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" + integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== + commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.7.1, commander@^2.8.1: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" @@ -9780,11 +9802,6 @@ commander@^6.2.0, commander@^6.2.1: resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== -commander@^7.0.0: - version "7.2.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" - integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== - commander@~2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4" @@ -10652,6 +10669,22 @@ d3-contour@^1.1.0: dependencies: d3-array "^1.1.1" +"d3-dsv@1 - 3": + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73" + integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q== + dependencies: + commander "7" + iconv-lite "0.6" + rw "1" + +d3-fetch@3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22" + integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw== + dependencies: + d3-dsv "1 - 3" + d3-format@1, d3-format@^1.2.0, d3-format@^1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030" @@ -10757,6 +10790,11 @@ d3-time@1: resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.11.tgz#1d831a3e25cd189eb256c17770a666368762bbce" integrity sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw== +d3-time@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1" + integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA== + d3-voronoi@^1.1.2: version "1.1.4" resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297" @@ -15597,6 +15635,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: dependencies: safer-buffer ">= 2.1.2 < 3" +iconv-lite@0.6: + version "0.6.3" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" + integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== + dependencies: + safer-buffer ">= 2.1.2 < 3.0.0" + iconv-lite@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01" @@ -24049,6 +24094,11 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" +rw@1: + version "1.3.3" + resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" + integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ== + rxjs-for-await@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/rxjs-for-await/-/rxjs-for-await-0.0.2.tgz#26598a1d6167147cc192172970e7eed4e620384b"