From f194a8f835b3679bd46094bf8a1051ca8f438336 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Sun, 24 Nov 2024 16:47:02 +0530 Subject: [PATCH 01/22] Create declarative chart component --- .../react-charting/etc/react-charting.api.md | 8 ++ .../react-charting/src/DeclarativeChart.ts | 1 + .../DeclarativeChart/DeclarativeChart.tsx | 25 ++++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 123 ++++++++++++++++++ packages/charts/react-charting/src/index.ts | 2 + .../DonutChart/DonutChart.Plotly.Example.tsx | 51 ++++++++ .../DonutChart/DonutChart.doc.tsx | 8 ++ .../DonutChart/DonutChartPage.tsx | 6 + .../DonutChart/index.stories.tsx | 3 + 9 files changed, 227 insertions(+) create mode 100644 packages/charts/react-charting/src/DeclarativeChart.ts create mode 100644 packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx create mode 100644 packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts create mode 100644 packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index ee944e9396661..5b88f1a0a7065 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -119,6 +119,14 @@ export const DataVizPalette: { highSuccess: string; }; +// @public (undocumented) +export const DeclarativeChart: React_2.FunctionComponent; + +// @public (undocumented) +export interface DeclarativeChartProps extends React_2.RefAttributes { + chartSchema: any; +} + // @public export const DonutChart: React_2.FunctionComponent; diff --git a/packages/charts/react-charting/src/DeclarativeChart.ts b/packages/charts/react-charting/src/DeclarativeChart.ts new file mode 100644 index 0000000000000..601785662c577 --- /dev/null +++ b/packages/charts/react-charting/src/DeclarativeChart.ts @@ -0,0 +1 @@ +export * from './components/DeclarativeChart/DeclarativeChart'; \ No newline at end of file diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx new file mode 100644 index 0000000000000..68fd2a521abab --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { DonutChart } from '../DonutChart/index'; +import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index'; +import { transformPlotlyJsonToDonutProps, transformPlotlyJsonToColumnProps } from './PlotlySchemaAdapter'; + +export interface DeclarativeChartProps extends React.RefAttributes { + /** + * The schema representing the chart + */ + chartSchema: any; + } + + export const DeclarativeChart: React.FunctionComponent = React.forwardRef( + (props, forwardedRef) => { + switch (props.chartSchema.data[0].type) { + case 'pie': + return ; + case 'bar': + return ; + default: + return null; + } + }, + ); + DeclarativeChart.displayName = 'DeclarativeChart'; \ No newline at end of file diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts new file mode 100644 index 0000000000000..070aaa0d7bbe4 --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -0,0 +1,123 @@ +import { IDonutChartProps } from '../DonutChart/index'; +import { IChartProps, IVerticalStackedChartProps } from '../../types/IDataPoint'; +import { getNextColor } from '../../utilities/colors'; +import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; + +export const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => { + const donutData: IChartProps = { + chartTitle: obj.layout.title, + chartData: obj.data[0].labels.map((label: string, index: number) => { + return { + legend: label, + data: obj.data[0].values[index], + color: getNextColor(index), + }; + }), + }; + + const width: number = obj.layout.width || 440; + const height: number = obj.layout.height || 220; + const innerRadius: number = (Math.min(width, height - 40) * (obj.data[0].hole || 0.5)) / 2; + + return { + data: donutData, + hideLegend: !obj.layout.showlegend, + width, + height, + innerRadius, + }; + }; + +export const transformPlotlyJsonToColumnProps = (obj: any): IVerticalStackedBarChartProps => { + const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; + let yMaxValue = 0; + + obj.data.forEach((series: any, index1: number) => { + series.x.forEach((x: string | number, index2: number) => { + if (!mapXToDataPoints[x]) { + mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; + } + if (series.type === 'bar') { + mapXToDataPoints[x].chartData.push({ + legend: series.name, + data: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } else if (series.type === 'line') { + mapXToDataPoints[x].lineData!.push({ + legend: series.name, + y: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } + yMaxValue = Math.max(yMaxValue, series.y[index2]); + }); + }); + + return { + data: Object.values(mapXToDataPoints), + chartTitle: obj.layout.title, + // width: obj.layout.width, + // height: obj.layout.height, + barWidth: 'auto', + yMaxValue, + }; +}; + +function isTypedArray(a: any) { + return ArrayBuffer.isView(a) && !(a instanceof DataView); +} + +function isArrayOrTypedArray(a: any) { + return Array.isArray(a) || isTypedArray(a); +} + +function isPlainObject(obj: any) { + if(window && window.process && window.process.versions) { + return Object.prototype.toString.call(obj) === '[object Object]'; + } + + return ( + Object.prototype.toString.call(obj) === '[object Object]' && + Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty') + ); +}; + +var arrayAttributes: any[] = []; +var stack: any[] = []; +var isArrayStack: any[] = []; +var baseContainer: any, baseAttrName: any; +/** + * Interate iteratively through the trace object and find all the array attributes. + * 1 trace record = 1 series of data + * @param trace + */ +export function findArrayAttributes(trace: any) { + // Init basecontainer and baseAttrName + crawlIntoTrace(baseContainer, 0, ''); + for (const attribute of arrayAttributes) { + console.log(attribute); + } +} + + function crawlIntoTrace(container: any, i: number, astrPartial: any) { + var item = container[stack[i]]; + var newAstrPartial = astrPartial + stack[i]; + if(i === stack.length - 1) { + if(isArrayOrTypedArray(item)) { + arrayAttributes.push(baseAttrName + newAstrPartial); + } + } else { + if(isArrayStack[i]) { + if(Array.isArray(item)) { + for(var j = 0; j < item.length; j++) { + if(isPlainObject(item[j])) { + crawlIntoTrace(item[j], i + 1, newAstrPartial + '[' + j + '].'); + } + } + } + } else if(isPlainObject(item)) { + crawlIntoTrace(item, i + 1, newAstrPartial + '.'); + } + } +} \ No newline at end of file diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index b07e003e52748..7ab3f32fa8376 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -135,5 +135,7 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; +export type { DeclarativeChartProps } from './DeclarativeChart'; +export { DeclarativeChart } from './DeclarativeChart'; import './version'; diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..d7a1803fe442f --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { DeclarativeChart } from '@fluentui/react-charting'; + +const plotlyJson = { + data: [ + { + hole: 0.6, + type: 'pie', + frame: null, + marker: { + line: { + color: 'transparent', + }, + color: 'rgba(31,119,180,1)', + fillcolor: 'rgba(31,119,180,1)', + }, + labelssrc: 'koolio:2:346057', + labels: ['Rural', 'Suburban', 'Urban'], + valuessrc: 'koolio:2:95d156', + values: [125, 625, 1625], + }, + ], + layout: { + title: 'Donut w Ply', + xaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + yaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + margin: { + b: 40, + l: 60, + r: 10, + t: 25, + }, + hovermode: 'closest', + showlegend: true, + }, + frames: [], +}; + +export class DonutChartPlotlyExample extends React.Component<{}, {}> { + public render(): React.ReactNode { + return ; + } +} \ No newline at end of file diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx index 6c49316833cf8..db7fdbeff26f8 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx @@ -6,6 +6,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; const DonutChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx') as string; @@ -15,6 +16,8 @@ const DonutChartCustomCalloutExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx') as string; const DonutChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx') as string; +const DonutChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx') as string; export const DonutChartPageProps: IDocPageProps = { title: 'DonutChart', @@ -42,6 +45,11 @@ export const DonutChartPageProps: IDocPageProps = { code: DonutChartCustomAccessibilityExampleCode, view: , }, + { + title: 'DonutChart Plotly', + code: DonutChartPlotlyExampleCode, + view: , + }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md'), diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx index 10d3a75feeb85..f6a912156633a 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx @@ -12,6 +12,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; const DonutChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx') as string; @@ -21,6 +22,8 @@ const DonutChartCustomCalloutExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx') as string; const DonutChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx') as string; +const DonutChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx') as string; export class DonutChartPage extends React.Component { public render(): JSX.Element { @@ -42,6 +45,9 @@ export class DonutChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx index 94732d49f5959..5f1189ecb53d0 100644 --- a/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx @@ -4,6 +4,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; export const Basic = () => ; @@ -13,6 +14,8 @@ export const CustomCallout = () => ; export const Dynamic = () => ; +export const Plotly = () => ; + export default { title: 'Components/DonutChart', }; From 8902f850e3c3a569aba816de1c4e5e1c1a628125 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Sun, 24 Nov 2024 20:01:49 +0530 Subject: [PATCH 02/22] Update data processing --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 070aaa0d7bbe4..b1e581ff7b1dc 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -3,36 +3,38 @@ import { IChartProps, IVerticalStackedChartProps } from '../../types/IDataPoint' import { getNextColor } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; -export const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => { +export const transformPlotlyJsonToDonutProps = (jsonObj: any): IDonutChartProps => { + const { data, layout } = jsonObj; const donutData: IChartProps = { - chartTitle: obj.layout.title, - chartData: obj.data[0].labels.map((label: string, index: number) => { + chartTitle: layout.title, + chartData: data[0].labels.map((label: string, index: number) => { return { legend: label, - data: obj.data[0].values[index], + data: data[0].values[index], color: getNextColor(index), }; }), }; - const width: number = obj.layout.width || 440; - const height: number = obj.layout.height || 220; - const innerRadius: number = (Math.min(width, height - 40) * (obj.data[0].hole || 0.5)) / 2; + const width: number = layout.width || 440; + const height: number = layout.height || 220; + const innerRadius: number = (Math.min(width, height - 40) * (data[0].hole || 0.5)) / 2; return { data: donutData, - hideLegend: !obj.layout.showlegend, + hideLegend: !layout.showlegend, width, height, innerRadius, }; }; -export const transformPlotlyJsonToColumnProps = (obj: any): IVerticalStackedBarChartProps => { +export const transformPlotlyJsonToColumnProps = (jsonObj: any): IVerticalStackedBarChartProps => { + const { data, layout } = jsonObj; const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; let yMaxValue = 0; - obj.data.forEach((series: any, index1: number) => { + data.forEach((series: any, index1: number) => { series.x.forEach((x: string | number, index2: number) => { if (!mapXToDataPoints[x]) { mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; @@ -56,9 +58,9 @@ export const transformPlotlyJsonToColumnProps = (obj: any): IVerticalStackedBarC return { data: Object.values(mapXToDataPoints), - chartTitle: obj.layout.title, - // width: obj.layout.width, - // height: obj.layout.height, + chartTitle: layout.title, + // width: layout.width, + // height: layout.height, barWidth: 'auto', yMaxValue, }; From 99e2c236ce90192c8c48419117378c9620a1f545 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 25 Nov 2024 08:37:26 +0530 Subject: [PATCH 03/22] Add examples for test schema --- .../DeclarativeChart/DeclarativeChart.tsx | 2 +- .../DeclarativeChart.Basic.Example.tsx | 79 + .../DeclarativeChart/DeclarativeChart.doc.tsx | 28 + .../DeclarativeChart/DeclarativeChartPage.tsx | 53 + .../docs/DeclarativeChartBestPractices.md | 3 + .../docs/DeclarativeChartDonts.md | 1 + .../docs/DeclarativeChartDos.md | 1 + .../docs/DeclarativeChartOverview.md | 1 + .../DeclarativeChart/index.stories.tsx | 9 + .../DeclarativeChart/schema/fluent_area.json | 103 + .../DeclarativeChart/schema/fluent_donut.json | 64 + .../DeclarativeChart/schema/fluent_gauge.json | 72 + .../schema/fluent_heatmap.json | 221 ++ .../schema/fluent_horizontalbar.json | 87 + .../DeclarativeChart/schema/fluent_line.json | 439 ++++ .../DeclarativeChart/schema/fluent_pie.json | 24 + .../schema/fluent_sankey.json | 79 + .../schema/fluent_sparkline.json | 911 ++++++++ .../schema/fluent_treemap.json | 1918 +++++++++++++++++ .../schema/fluent_verticalbar.json | 79 + .../schema/fluent_verticalbar_histogram.json | 103 + .../src/react-charting/demo/AppDefinition.tsx | 6 + 22 files changed, 4282 insertions(+), 1 deletion(-) create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 68fd2a521abab..315325217fbf0 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -18,7 +18,7 @@ export interface DeclarativeChartProps extends React.RefAttributes; default: - return null; + return
Unsupported Schema
; } }, ); diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx new file mode 100644 index 0000000000000..940db699be683 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; +import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; + +interface IDeclarativeChartState { + selectedChoice: string; +} + +const options: IDropdownOption[] = [ + { key: 'areachart', text: 'Area Chart'}, + { key: 'donutchart', text: 'Donut Chart'}, + { key: 'gaugechart', text: 'Gauge Chart'}, + { key: 'heatmapchart', text: 'Heatmap Chart'}, + { key: 'horizontalbarchart', text: 'HorizontalBar Chart'}, + { key: 'linechart', text: 'Line Chart'}, + { key: 'piechart', text: 'Pie Chart'}, + { key: 'sankeychart', text: 'Sankey Chart'}, + { key: 'sparklinechart', text: 'Sparkline Chart'}, + { key: 'treemapchart', text: 'Treemap Chart'}, + { key: 'verticalbarchart', text: 'VerticalBar Chart'}, + { key: 'verticalbar_histogramchart', text: 'VerticalBar Histogram Chart'}, +]; + +const schemas: any[] = [ + { key: 'areachart', schema: require('./schema/fluent_area.json')}, + { key: 'donutchart', schema: require('./schema/fluent_donut.json')}, + { key: 'gaugechart', schema: require('./schema/fluent_gauge.json')}, + { key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json')}, + { key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json')}, + { key: 'linechart', schema: require('./schema/fluent_line.json')}, + { key: 'piechart', schema: require('./schema/fluent_pie.json')}, + { key: 'sankeychart', schema: require('./schema/fluent_sankey.json')}, + { key: 'sparklinechart', schema: require('./schema/fluent_sparkline.json')}, + { key: 'treemapchart', schema: require('./schema/fluent_treemap.json')}, + { key: 'verticalbarchart', schema: require('./schema/fluent_verticalbar.json')}, + { key: 'verticalbar_histogramchart', schema: require('./schema/fluent_verticalbar_histogram.json')}, +]; + +const dropdownStyles = { dropdown: { width: 200 } }; + +export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> { + constructor(props: DeclarativeChartProps) { + super(props); + this.state = { + selectedChoice: 'donutchart', + }; + } + + private _onChange = (ev: React.FormEvent, option: IDropdownOption): void => { + this.setState({ selectedChoice: option.key as string }); + }; + + private _getSchemaByKey(key: string): any { + const schema = schemas.find(schema => schema.key === key); + return schema ? schema.schema : null; + } + + public render(): JSX.Element { + return
{this._createDeclarativeChart()}
; + } + + private _createDeclarativeChart(): JSX.Element { + const selectedSchema = this._getSchemaByKey(this.state.selectedChoice); + + return ( + <> + +

+ + + ); + } +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.doc.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.doc.tsx new file mode 100644 index 0000000000000..c4e78535cd06f --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.doc.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { DeclarativeChartBasicExample } from './DeclarativeChart.Basic.Example'; + +const DeclarativeChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx') as string; + +export const DeclarativeChartPageProps: IDocPageProps = { + title: 'DeclarativeChart', + componentName: 'DeclarativeChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/charts/react-charting/src/components/DeclarativeChart', + examples: [ + { + title: 'DeclarativeChart basic', + code: DeclarativeChartBasicExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md'), + dos: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md'), + donts: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx new file mode 100644 index 0000000000000..86303063931f6 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import { + ComponentPage, + ExampleCard, + IComponentDemoPageProps, + PropertiesTableSet, + Markdown, +} from '@fluentui/react-docsite-components'; + +import { DeclarativeChartBasicExample } from './DeclarativeChart.Basic.Example'; + +const DeclarativeChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx') as string; + +export class DeclarativeChartPage extends React.Component { + public render(): JSX.Element { + return ( + + + + + + } + isHeaderVisible={this.props.isHeaderVisible} + overview={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md')} + + } + dos={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md')} + + } + donts={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md')} + + } + /> + ); + } +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md new file mode 100644 index 0000000000000..6e3effeb9ca9f --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartBestPractices.md @@ -0,0 +1,3 @@ +### Layout + +Placeholder diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md new file mode 100644 index 0000000000000..93e7e6ac97c13 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDonts.md @@ -0,0 +1 @@ +- Placeholder diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md new file mode 100644 index 0000000000000..93e7e6ac97c13 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartDos.md @@ -0,0 +1 @@ +- Placeholder diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md new file mode 100644 index 0000000000000..3b94f915737ab --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/docs/DeclarativeChartOverview.md @@ -0,0 +1 @@ +Placeholder diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/index.stories.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/index.stories.tsx new file mode 100644 index 0000000000000..d2c31449a6b9a --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/index.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +import { DeclarativeChartBasicExample } from './DeclarativeChart.Basic.Example'; + +export const Basic = () => ; + +export default { + title: 'Components/DeclarativeChart', +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json new file mode 100644 index 0000000000000..9094067577064 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json @@ -0,0 +1,103 @@ +{ + "visualizer": "plotly", + "data": [ + { + "fill": "tonexty", + "line": { + "color": "rgba(255, 153, 51, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "a", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754, + 0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841 + ], + "fillcolor": "rgba(255, 153, 51, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(55, 128, 191, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "b", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392, + 1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878 + ], + "fillcolor": "rgba(55, 128, 191, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(50, 171, 96, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "c", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358, + 1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171 + ], + "fillcolor": "rgba(50, 171, 96, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(128, 0, 128, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "d", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149, + 2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654 + ], + "fillcolor": "rgba(128, 0, 128, 0.3)" + } + ], + "layout": { + "legend": { + "font": { + "color": "#4D5663" + }, + "bgcolor": "#F5F6F9" + }, + "xaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "yaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "zeroline": false, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "plot_bgcolor": "#F5F6F9", + "paper_bgcolor": "#F5F6F9" + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json new file mode 100644 index 0000000000000..d6547f0ab7c1e --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json @@ -0,0 +1,64 @@ +{ + "visualizer": "plotly", + "data": [ + { + "hole": 0.6, + "type": "pie", + "frame": null, + "marker": { + "line": { + "color": "transparent" + }, + "color": "rgba(31,119,180,1)", + "fillcolor": "rgba(31,119,180,1)" + }, + "labels": [ + "AMC", + "Cadillac", + "Camaro", + "Chrysler", + "Datsun", + "Dodge", + "Duster", + "Ferrari", + "Fiat", + "Ford", + "Honda", + "Hornet", + "Lincoln", + "Lotus", + "Maserati", + "Mazda", + "Merc", + "Pontiac", + "Porsche", + "Toyota", + "Valiant", + "Volvo" + ], + "values": [1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1, 2, 7, 1, 1, 2, 1, 1] + } + ], + "layout": { + "title": "Donut charts using Plotly", + "xaxis": { + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis": { + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "margin": { + "b": 40, + "l": 60, + "r": 10, + "t": 25 + }, + "hovermode": "closest", + "showlegend": false + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json new file mode 100644 index 0000000000000..9e372fdd511a9 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json @@ -0,0 +1,72 @@ +{ + "visualizer": "plotly", + "data": [ + { + "name": "speed", + "text": 2468, + "type": "scatter", + "x": [0], + "y": [0], + "marker": { + "size": 28, + "color": "850000" + }, + "hoverinfo": "text+name", + "showlegend": false + }, + { + "hole": 0.5, + "type": "pie", + "marker": { + "colors": [ + "rgba(14, 127, 0, .5)", + "rgba(110, 154, 22, .5)", + "rgba(170, 202, 42, .5)", + "rgba(202, 209, 95, .5)", + "rgba(210, 206, 145, .5)", + "rgba(232, 226, 202, .5)", + "rgba(255, 255, 255, 0)" + ] + }, + "text": ["60% +", "50%", "40%", "30%", "20%", "10%", ""], + "rotation": 90, + "textinfo": "text", + "hoverinfo": "label", + "labels": ["151-180", "121-150", "91-120", "61-90", "31-60", "0-30", ""], + "values": [ + 8.333333333333334, 8.333333333333334, 8.333333333333334, 8.333333333333334, 8.333333333333334, + 8.333333333333334, 50 + ], + "showlegend": false, + "textposition": "inside" + } + ], + "layout": { + "title": "Gauge", + "width": 1000, + "xaxis": { + "range": [-1, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis": { + "range": [-1, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "height": 1000, + "shapes": [ + { + "line": { + "color": "850000" + }, + "path": "M -.0 -0.025 L .0 0.025 L -0.659197688992 0.751969684779 Z", + "type": "path", + "fillcolor": "850000" + } + ] + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json new file mode 100644 index 0000000000000..838e81191b432 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json @@ -0,0 +1,221 @@ +{ + "visualizer": "plotly", + "data": [ + { + "type": "heatmap", + "x": [ + "x_0", + "x_1", + "x_2", + "x_3", + "x_4", + "x_5", + "x_6", + "x_7", + "x_8", + "x_9", + "x_10", + "x_11", + "x_12", + "x_13", + "x_14", + "x_15", + "x_16", + "x_17", + "x_18", + "x_19" + ], + "y": [ + "y_0", + "y_1", + "y_2", + "y_3", + "y_4", + "y_5", + "y_6", + "y_7", + "y_8", + "y_9", + "y_10", + "y_11", + "y_12", + "y_13", + "y_14", + "y_15", + "y_16", + "y_17", + "y_18", + "y_19" + ], + "z": [ + [ + 12.0, 11.697147742124411, 7.1748009833505355, 11.443688379214382, 23.648522429525176, 10.040502684649338, + 10.819974608119614, 20.83991840239746, 14.378243279399832, 9.546437633051273, 2.117430162487592, + 24.053122758748437, 14.741753869753929, 11.223068582526338, 2.9058799108357736, 12.523922839169199, + 12.426446278371158, 15.786820017213348, 25.828355052498736, 15.884458175971286 + ], + [ + 18.072596781382654, 6.872368565119988, 2.6331323456979367, 8.910260123844887, 23.29825386450679, + 9.18418261775059, 18.052236884018036, 32.088269277118485, 15.862814449470617, 20.517302217015732, + 1.5668378537843557, 19.031137709612036, 12.133745300119848, 8.724453334098921, 8.972456038301432, + 9.771921362871048, 4.761205803361531, 23.82727745555418, 14.369250386770794, 9.730029718884163 + ], + [ + 16.104827483834423, 16.816096580158092, -1.0796033248100874, 13.037577162924944, 25.071276081749808, + -6.016235615271988, 12.248777535804365, 35.617617939013286, 20.621055215762404, 18.321563171124787, + 5.106104151848498, 20.47764211274059, 13.078423154116999, 4.270904076038434, 10.32885307002288, + 11.953280688550777, 1.5514493835400103, 28.102083355215736, 11.122082151320692, 17.271525748515398 + ], + [ + 12.732656491556462, 24.158612074358526, 1.8639666906231516, 9.195075731494875, 19.788944565361437, + -6.833645216204284, 9.969142303073252, 46.34145242145437, 27.310374393715577, 15.451738777747869, + 6.691398648622392, 14.55281641333698, 31.321025344254267, 9.311054030160307, 12.004790333591908, + 13.059625413572078, 10.25485330260371, 29.181400631242038, 17.203123079730577, 15.96262678993938 + ], + [ + 10.424697200562369, 28.78022939969912, 3.274446200066722, 8.669870516018236, 17.75655781585482, + -6.896721183137775, 17.337127681913973, 42.70107878756259, 27.376076996458107, 10.416788406228507, + 5.9545352540812, 15.043018310072712, 32.12573718137715, 11.294834569956391, 16.313424113247194, + 15.444451104553893, 10.443516068409753, 33.07558322142471, 22.67825393852671, 14.910979364805373 + ], + [ + 1.3848305486418013, 28.88858899620542, 12.971410893817621, 21.143305039916708, 7.466382276034302, + -2.108394838355938, 16.027000754389025, 40.70844626018491, 25.966261645863177, 0.9043901831061678, + -0.6718858579700804, 2.6597070827875093, 36.093975687401766, 12.79240265673884, 16.292076219475025, + 13.792475502830154, 9.90068532879486, 36.74806639404701, 26.577346684827898, 16.005211030243927 + ], + [ + -6.877933971525136, 44.04384439381119, 13.548126342387011, 17.74014481550033, 15.7912983146064, + -6.563883600581922, 21.49865383744765, 38.24729505908534, 25.710457133039732, 2.2251747151953722, + -10.093623877175773, 1.9137585062069147, 28.853944000537858, 9.119846857537635, 16.770107402461807, + 7.3577813910229235, 5.875139865786533, 39.12143717188403, 1.341905660672623, 16.777803239858564 + ], + [ + -7.513284950652834, 44.21182779048812, 14.479713711226983, 17.660499931671584, 14.436062506263415, + -8.630753569571617, 18.920515851612024, 41.961872256649784, 30.992785862263872, 0.3821317782171232, + -9.481337721021028, 1.6266164906990555, 20.52198483872326, 9.822475957217343, 15.658011352744083, + 12.855391500184762, 10.723957376497331, 41.76485494373556, 2.2340479176319485, 16.088953253894616 + ], + [ + 0.02929945240777787, 47.8943258538308, 13.4384038570412, 17.917433759396193, 17.039432522289083, + -4.774743239794282, 12.169188113505435, 40.42317097918186, 37.22474246115934, 0.22091049853526112, + -9.687370268531138, 10.608534707379862, 22.489367975650175, 10.669348146795615, 13.95650541886101, + 6.839552569406474, 2.066756467090924, 54.581934085152405, 3.5319443821756225, 24.532968918280666 + ], + [ + 1.3315750803470996, 45.90255894008207, 9.162060301209916, -1.2943200134022526, 21.982396858443334, + -2.0046315173801657, 23.75776947991829, 42.681396519281044, 44.65189694360409, -3.233129329636757, + -11.7007015295863, 8.768962763531919, 21.48008268870696, 11.750650693071353, 10.314016323078881, + 6.044971885000999, 0.39568846222827236, 56.79992555682459, 9.686881597266042, 29.573837224244713 + ], + [ + -0.34155835630595655, 52.257883472637104, 14.63013635132661, -1.1475310646451669, 19.815434611539906, + -0.3597615447940745, 22.773438522174473, 45.16830973647258, 50.90620858214391, -4.123416917882673, + -10.08874106711032, 17.77058648507848, 17.40525407651549, 19.428287067763215, 10.154808609159593, + 9.41560200751194, 1.9106824056688325, 55.50321452563245, -1.086930629298445, 29.942519927990794 + ], + [ + -1.2496939708148902, 52.0753263525035, 16.573843720560127, 0.6254954059905691, 25.67070005332393, + 2.8833642841959586, 21.05489065711163, 45.54977153406254, 54.790476948309696, -1.1319446806674005, + -6.836880142255078, 15.502730715077965, 16.434991284495794, 20.05330736176254, 2.3102989662620654, + 6.6400837474901095, 3.4554008460006247, 54.703320294165096, -3.275155410653531, 34.69783250602105 + ], + [ + 3.673504371828866, 55.66537870906952, 22.222025244923273, -2.1871046243479864, 28.014054309766728, + -1.9343227464152601, 29.16438526268995, 44.051494895676456, 47.138525452751004, -2.533067604753474, + 2.4604369987892873, 19.673236477344094, 23.43582349379937, 18.46461800040717, 3.2513035287755745, + 7.4638277204597046, 5.836414662127938, 63.63736027633095, -2.3182235215935463, 28.362102774855607 + ], + [ + 9.197351864496074, 55.98556586180058, 19.688495387348357, -1.1757697666321, 26.78831096366896, + -5.206570891432279, 29.755041090905404, 35.45913888587404, 48.543398737558654, 3.274578409778302, + 7.640442280843416, 6.615425581412669, 27.520672134556655, 17.13948338893387, -0.7130168306222968, + 3.4923248627721257, 10.663420634170265, 62.79712211239938, -7.102421907260435, 25.96909143426486 + ], + [ + 17.878378279408615, 65.61603877495548, 21.1073514253479, -9.253213203481765, 27.879670681460908, + -2.8320537701090256, 26.13796211607032, 24.926244822709098, 41.22820882460708, 4.291828909220028, + 4.713688574820864, 16.71505221410986, 27.48982397761371, 14.998235183145638, -1.0419904618770504, + -0.1509352342460648, 11.562765259884168, 54.381939331520186, -15.369316543252658, 25.018616836414115 + ], + [ + 18.3594620989525, 66.76755465163893, 23.378561600159312, -9.221557127656212, 28.23165649899542, + -0.3620931039471351, 28.91643855216486, 11.188848304771073, 43.30138646653476, 5.000880279196099, + 1.955677009677276, 17.279662785715818, 26.178614647552152, 21.57198989722974, -1.3161643920050667, + -9.439334496282449, 18.312638310718047, 54.77270799612626, -13.618633943842825, 34.04601203745518 + ], + [ + 9.52854140993721, 66.15934256222516, 25.727095609917317, -16.01042996598902, 24.77811171644336, + -1.2825355952790376, 19.064261874916085, 14.509555473536986, 43.57067434580797, 7.890650307112603, + 1.6731169765193206, 11.216733394728445, 25.858459074516183, 18.23274943606415, -1.5424885952686824, + -9.408565254995368, 24.78142561950699, 55.72892300395096, -6.132435488791322, 32.12418971970468 + ], + [ + 8.834804620855842, 58.63396530456222, 32.725737544844485, -13.465901648481573, 31.313375862796256, + -1.937020141351771, 14.893297536987049, 23.629750932895455, 41.77269087492713, 9.082388429023517, + -6.034577415215565, 26.401238496860607, 30.051671106505943, 23.834062269627154, -3.561155588342318, + -10.717340944667358, 25.98741506616426, 55.13836837404197, -12.222227236438126, 30.768724196434682 + ], + [ + 2.008683713506029, 68.77074374390875, 27.561261630596558, -11.972754232678293, 27.652138241890253, + -8.994598412149836, 16.01202612993778, 27.496822437992087, 42.223038572972655, 9.14302748045202, + -9.49672264010566, 25.872388552562622, 29.591488992612543, 17.887210405056912, -5.273287251587566, + -12.231659074097587, 25.21878307435221, 55.4498407189013, -16.160855914516, 32.26936734704534 + ], + [ + 1.4746401926975559, 76.5710413276318, 22.444170064560886, -11.754560357801614, 31.65020848831535, + -6.747073251084499, 10.677375854561543, 18.290237353501528, 44.04246479548906, -0.9669084139974888, + -10.02999798650989, 26.331023176529538, 23.744787277420585, 21.58401811955205, -5.054619683005746, + -12.304220941049874, 22.0278850405599, 68.76140423378733, -11.104838839030073, 32.93901719565705 + ] + ], + "colorscale": [ + [0.0, "rgb(158,1,66)"], + [0.1, "rgb(213,62,79)"], + [0.2, "rgb(244,109,67)"], + [0.3, "rgb(253,174,97)"], + [0.4, "rgb(254,224,139)"], + [0.5, "rgb(255,255,191)"], + [0.6, "rgb(230,245,152)"], + [0.7, "rgb(171,221,164)"], + [0.8, "rgb(102,194,165)"], + [0.9, "rgb(50,136,189)"], + [1.0, "rgb(94,79,162)"] + ] + } + ], + "layout": { + "legend": { + "font": { + "color": "#4D5663" + }, + "bgcolor": "#F5F6F9" + }, + "xaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "yaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "zeroline": false, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "plot_bgcolor": "#F5F6F9", + "paper_bgcolor": "#F5F6F9" + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json new file mode 100644 index 0000000000000..fcb6208421273 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json @@ -0,0 +1,87 @@ +{ + "visualizer": "plotly", + "data": [ + { + "uid": "2f399e", + "name": "Votes", + "type": "bar", + "x": [1659, 1067, 671, 597, 504, 418, 407, 390, 378, 274, 255, 243, 203, 169, 79, 65, 42, 35, 35, 25, 17, 11, 10], + "y": [ + "Laravel", + "Symfony2", + "Nette", + "CodeIgniter", + "Yii 2", + "PHPixie", + "Yii 1", + "Zend Framework 2", + "Company Internal Framework", + "Zend Framework 1", + "CakePHP", + "No Framework", + "We use a CMS for everything", + "Phalcon", + "Slim", + "Silex", + "Simple MVC Framework", + "Typo 3", + "Kohana", + "FuelPHP", + "TYPO3 Flow", + "Drupal", + "Aura" + ], + "zmax": 1, + "zmin": 0, + "xbins": { + "end": 2499.5, + "size": 500, + "start": -500.5 + }, + "ybins": { + "end": 23.5, + "size": 1, + "start": -1.5 + }, + "opacity": 1, + "visible": true, + "autobinx": true, + "autobiny": true, + "contours": { + "end": 0.901, + "size": 0.1, + "start": 0.1, + "coloring": "fill", + "showlines": true + }, + "showlegend": true, + "orientation": "h" + } + ], + "layout": { + "title": "PHP Framework Popularity at Work - SitePoint, 2015", + "width": 1151, + "xaxis": { + "type": "linear", + "range": [-198.2562959184288, 1830.6731869091736], + "title": "Votes", + "autorange": false + }, + "yaxis": { + "type": "category", + "range": [-3.301575351429676, 23.42061223132087], + "title": "Framework", + "autorange": false + }, + "height": 742, + "margin": { + "l": 210, + "pad": 4 + }, + "barmode": "group", + "barnorm": "", + "autosize": true, + "showlegend": false + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json new file mode 100644 index 0000000000000..4197999e2576f --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json @@ -0,0 +1,439 @@ +{ + "visualizer": "plotly", + "data": [ + { + "line": { + "color": "rgba(255, 153, 51, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "Trace 0", + "type": "scatter", + "x": [ + "2015-01-01", + "2015-01-02", + "2015-01-03", + "2015-01-04", + "2015-01-05", + "2015-01-06", + "2015-01-07", + "2015-01-08", + "2015-01-09", + "2015-01-10", + "2015-01-11", + "2015-01-12", + "2015-01-13", + "2015-01-14", + "2015-01-15", + "2015-01-16", + "2015-01-17", + "2015-01-18", + "2015-01-19", + "2015-01-20", + "2015-01-21", + "2015-01-22", + "2015-01-23", + "2015-01-24", + "2015-01-25", + "2015-01-26", + "2015-01-27", + "2015-01-28", + "2015-01-29", + "2015-01-30", + "2015-01-31", + "2015-02-01", + "2015-02-02", + "2015-02-03", + "2015-02-04", + "2015-02-05", + "2015-02-06", + "2015-02-07", + "2015-02-08", + "2015-02-09", + "2015-02-10", + "2015-02-11", + "2015-02-12", + "2015-02-13", + "2015-02-14", + "2015-02-15", + "2015-02-16", + "2015-02-17", + "2015-02-18", + "2015-02-19", + "2015-02-20", + "2015-02-21", + "2015-02-22", + "2015-02-23", + "2015-02-24", + "2015-02-25", + "2015-02-26", + "2015-02-27", + "2015-02-28", + "2015-03-01", + "2015-03-02", + "2015-03-03", + "2015-03-04", + "2015-03-05", + "2015-03-06", + "2015-03-07", + "2015-03-08", + "2015-03-09", + "2015-03-10", + "2015-03-11", + "2015-03-12", + "2015-03-13", + "2015-03-14", + "2015-03-15", + "2015-03-16", + "2015-03-17", + "2015-03-18", + "2015-03-19", + "2015-03-20", + "2015-03-21", + "2015-03-22", + "2015-03-23", + "2015-03-24", + "2015-03-25", + "2015-03-26", + "2015-03-27", + "2015-03-28", + "2015-03-29", + "2015-03-30", + "2015-03-31", + "2015-04-01", + "2015-04-02", + "2015-04-03", + "2015-04-04", + "2015-04-05", + "2015-04-06", + "2015-04-07", + "2015-04-08", + "2015-04-09", + "2015-04-10" + ], + "y": [ + 0.5353935439391206, -0.3510205670171982, -1.3420793330744663, -1.683479706754631, -2.0207368899942826, + 0.006604084375472663, 0.8037048387382045, 1.6685589999803645, 1.2683547027403048, -1.3330462677331034, + -1.8663123665480104, -2.8051461261147357, -4.563508055068453, -3.7591847216910996, -3.5134185618878746, + -5.3419268826351995, -3.332156069299614, -3.5678897362109545, -3.8548236009547465, -4.58628192762981, + -4.116554826788904, -2.7610003378381496, -2.621859111953831, -2.6349689848833315, -2.0581142585936076, + -0.7744078058377932, 0.9002451055355818, 0.8373590393039949, 0.5532093840234236, 1.469976651890828, + 3.1860367266233904, 2.493612510772345, 1.9464391258267615, 1.8807283125005585, 3.0189402685173534, + 4.556005864163605, 5.516442345945973, 4.319606652282435, 6.845756127344204, 7.053236096270982, + 7.681494725458877, 7.526563745782537, 8.858342186205558, 9.021889375014881, 8.209805336778926, + 9.383959972549016, 11.195848970970625, 12.561537445362251, 14.373511358982237, 15.887456275652418, + 14.491455240251522, 15.199461217404735, 16.378844807972094, 14.348345501207364, 14.961597203409823, + 15.457566696478484, 14.942769687687289, 15.721527909780036, 13.091278962257627, 14.295247001092115, + 15.296655272416865, 14.436440585461526, 13.912453188370755, 12.433861225213807, 14.061345247447989, + 13.326092951912521, 13.566974950387175, 12.96345607653163, 12.205278846692087, 11.364010452431279, + 12.120962982512733, 13.570258079014422, 14.613857418348378, 15.48868026864105, 15.421250297066777, + 16.562957844203055, 16.365666723485436, 15.848038393086913, 16.170083705874156, 16.446617416519754, + 15.024371154281331, 14.802238239296665, 13.156751496135007, 14.06168725142282, 14.94588113322983, + 14.127589669913032, 13.885898170515487, 13.692030694564533, 14.943253908206318, 14.529368596515058, + 14.661473471114782, 13.67375983483632, 13.382284458918326, 12.527287002966496, 12.767994473001014, + 12.651030056419879, 12.141617852418765, 13.606694447410502, 13.923089943159189, 14.003348672865656 + ] + }, + { + "line": { + "color": "rgba(55, 128, 191, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "Trace 1", + "type": "scatter", + "x": [ + "2015-01-01", + "2015-01-02", + "2015-01-03", + "2015-01-04", + "2015-01-05", + "2015-01-06", + "2015-01-07", + "2015-01-08", + "2015-01-09", + "2015-01-10", + "2015-01-11", + "2015-01-12", + "2015-01-13", + "2015-01-14", + "2015-01-15", + "2015-01-16", + "2015-01-17", + "2015-01-18", + "2015-01-19", + "2015-01-20", + "2015-01-21", + "2015-01-22", + "2015-01-23", + "2015-01-24", + "2015-01-25", + "2015-01-26", + "2015-01-27", + "2015-01-28", + "2015-01-29", + "2015-01-30", + "2015-01-31", + "2015-02-01", + "2015-02-02", + "2015-02-03", + "2015-02-04", + "2015-02-05", + "2015-02-06", + "2015-02-07", + "2015-02-08", + "2015-02-09", + "2015-02-10", + "2015-02-11", + "2015-02-12", + "2015-02-13", + "2015-02-14", + "2015-02-15", + "2015-02-16", + "2015-02-17", + "2015-02-18", + "2015-02-19", + "2015-02-20", + "2015-02-21", + "2015-02-22", + "2015-02-23", + "2015-02-24", + "2015-02-25", + "2015-02-26", + "2015-02-27", + "2015-02-28", + "2015-03-01", + "2015-03-02", + "2015-03-03", + "2015-03-04", + "2015-03-05", + "2015-03-06", + "2015-03-07", + "2015-03-08", + "2015-03-09", + "2015-03-10", + "2015-03-11", + "2015-03-12", + "2015-03-13", + "2015-03-14", + "2015-03-15", + "2015-03-16", + "2015-03-17", + "2015-03-18", + "2015-03-19", + "2015-03-20", + "2015-03-21", + "2015-03-22", + "2015-03-23", + "2015-03-24", + "2015-03-25", + "2015-03-26", + "2015-03-27", + "2015-03-28", + "2015-03-29", + "2015-03-30", + "2015-03-31", + "2015-04-01", + "2015-04-02", + "2015-04-03", + "2015-04-04", + "2015-04-05", + "2015-04-06", + "2015-04-07", + "2015-04-08", + "2015-04-09", + "2015-04-10" + ], + "y": [ + -2.58404773330316, -1.9162964761259451, -1.8899798841571565, -1.098466181069551, -1.2161136413159992, + -0.9298011508867184, -2.5216450120142193, -1.5547013224314532, -3.1293219775443117, -2.7232351981528025, + -1.704449229625379, -1.2702366750752472, -1.7688923656442583, -1.9810878959630682, -1.0881359248000217, + -0.5214761704035035, -0.639866394654719, -2.258513886233204, -0.8711892253875131, -0.45426547393253053, + -2.4076676391235785, -2.2450025826137097, -2.3488062397069234, -3.2188990647525304, -2.6042445674055594, + -2.9702468803291966, -4.139691822816822, -3.9967022316870042, -4.796271521377118, -5.244924380701339, + -6.965620503609484, -6.430396926773768, -5.234457265252843, -6.181791776690352, -7.3464387119459085, + -7.085650875056526, -6.795217278293396, -6.08725142043377, -5.3416313194169875, -4.900094995211111, + -4.715363010029477, -3.6757033584677927, -5.873900613367271, -7.685787089886274, -8.833149292574403, + -9.373517123532867, -10.519456187180836, -8.012082850355387, -8.556759031756883, -8.78527769843948, + -8.801850250864483, -9.031427690493008, -9.289972806031075, -8.434541044235305, -8.543619303217836, + -9.817816201809572, -9.691704922707196, -9.172230718814316, -10.389025830978015, -9.418276522564378, + -8.844666134378604, -10.649699554950736, -11.433978738990442, -11.022214964648152, -11.156982299530265, + -12.846500605483975, -12.700459270895378, -13.701718476553872, -14.281259852458456, -13.197701892598191, + -13.444607930505104, -12.703127086621702, -12.38184968649959, -13.545422038889187, -12.062411162554307, + -12.190051993521331, -13.801739083658532, -14.198265394729127, -14.29078542197376, -13.45263060195906, + -13.130412206893606, -14.189794518505105, -12.647928857811877, -13.252175401809115, -13.526006774399674, + -13.640567463371012, -13.234252510186453, -12.313307209824384, -11.218557557877709, -10.7821947135954, + -8.89016408336461, -9.662631443485989, -6.909371824212538, -7.048202688582138, -4.971706592042745, + -4.310618310025603, -2.954237793688564, -2.0883264569176156, 1.1805740980198571, 0.5040426644599496 + ] + }, + { + "line": { + "color": "rgba(50, 171, 96, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "Trace 2", + "type": "scatter", + "x": [ + "2015-01-01", + "2015-01-02", + "2015-01-03", + "2015-01-04", + "2015-01-05", + "2015-01-06", + "2015-01-07", + "2015-01-08", + "2015-01-09", + "2015-01-10", + "2015-01-11", + "2015-01-12", + "2015-01-13", + "2015-01-14", + "2015-01-15", + "2015-01-16", + "2015-01-17", + "2015-01-18", + "2015-01-19", + "2015-01-20", + "2015-01-21", + "2015-01-22", + "2015-01-23", + "2015-01-24", + "2015-01-25", + "2015-01-26", + "2015-01-27", + "2015-01-28", + "2015-01-29", + "2015-01-30", + "2015-01-31", + "2015-02-01", + "2015-02-02", + "2015-02-03", + "2015-02-04", + "2015-02-05", + "2015-02-06", + "2015-02-07", + "2015-02-08", + "2015-02-09", + "2015-02-10", + "2015-02-11", + "2015-02-12", + "2015-02-13", + "2015-02-14", + "2015-02-15", + "2015-02-16", + "2015-02-17", + "2015-02-18", + "2015-02-19", + "2015-02-20", + "2015-02-21", + "2015-02-22", + "2015-02-23", + "2015-02-24", + "2015-02-25", + "2015-02-26", + "2015-02-27", + "2015-02-28", + "2015-03-01", + "2015-03-02", + "2015-03-03", + "2015-03-04", + "2015-03-05", + "2015-03-06", + "2015-03-07", + "2015-03-08", + "2015-03-09", + "2015-03-10", + "2015-03-11", + "2015-03-12", + "2015-03-13", + "2015-03-14", + "2015-03-15", + "2015-03-16", + "2015-03-17", + "2015-03-18", + "2015-03-19", + "2015-03-20", + "2015-03-21", + "2015-03-22", + "2015-03-23", + "2015-03-24", + "2015-03-25", + "2015-03-26", + "2015-03-27", + "2015-03-28", + "2015-03-29", + "2015-03-30", + "2015-03-31", + "2015-04-01", + "2015-04-02", + "2015-04-03", + "2015-04-04", + "2015-04-05", + "2015-04-06", + "2015-04-07", + "2015-04-08", + "2015-04-09", + "2015-04-10" + ], + "y": [ + 0.4661114764240781, 1.0610769506804194, 1.0620659379275244, -0.5603096501263787, -0.22966983294858567, + 1.1358334022099883, 1.8697838063194905, 1.8307593169232188, 2.6294937170536055, 1.456439760404607, + 3.571977139947352, 3.305623978930223, 4.369054542737759, 4.134928856846778, 2.525747905079978, 4.45625041538837, + 5.331621195457201, 5.01722152487662, 3.2730061427478807, 2.3895586625726164, 1.5551868349111646, + 0.9222137047406664, -0.2408476097748915, -0.7735805458656726, -0.8871954038346644, -1.9822438634492547, + -0.8886612143982666, -0.7149527896910689, -1.1377284325144619, -1.7585300048885872, -2.8117170543153254, + -2.6809842525932175, -1.6457602974924186, -2.1361202183757593, -3.506112394459107, -3.338531391597358, + -5.511057758779813, -3.5261371875358676, -4.05255557741406, -5.188415501615373, -6.032557392677557, + -5.6858700345353785, -6.667528307767753, -6.733517550988596, -7.0502984033473615, -7.574898212324232, + -7.1843491903366, -6.080355259797091, -6.398354606750326, -6.286331305269291, -7.175762338255774, + -6.6277002690607105, -6.031655281290095, -5.243102836583583, -4.612608200873672, -5.180512683218164, + -5.0321319726702916, -4.567844497333498, -3.347239903958168, -2.5263058621799597, -3.554423668680612, + -1.7466537357472816, 0.08618389027480222, 1.0223852208396356, 2.2260700096326724, 2.976731277433707, + 2.5457541264066235, 2.412842465270771, 2.1270496073872933, 4.350264423349324, 3.6000820362032346, + 3.6547717673422704, 4.29856786980301, 4.61832134099102, 5.1364308299997825, 5.647209819441451, + 6.041357011724418, 4.789997568683162, 6.041650920258338, 5.860878612223213, 5.6050673038102214, + 3.900259274681964, 2.1974477295325476, 0.979239291658772, 0.9769412141062032, 1.1215546396840912, + 1.4131546401228463, -0.5715019565360024, -0.4798030419178908, -0.19867316746947167, -1.3237063703965808, + -1.5132847802948692, -0.9466159703619573, 1.3543877997088902, 1.3745632832250965, 1.2843024279329955, + 1.1384756757773304, 1.841477239971831, 1.0626945214201182, 1.6018849370336259 + ] + } + ], + "layout": { + "legend": { + "font": { + "color": "#4D5663" + }, + "bgcolor": "#F5F6F9" + }, + "xaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "yaxis1": { + "title": "Price", + "tickfont": { + "color": "#4D5663" + }, + "zeroline": false, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "tickprefix": "$", + "zerolinecolor": "#E1E5ED" + }, + "plot_bgcolor": "#F5F6F9", + "paper_bgcolor": "#F5F6F9" + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json new file mode 100644 index 0000000000000..60d5417830333 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json @@ -0,0 +1,24 @@ +{ + "visualizer": "plotly", + "data": [ + { + "type": "pie", + "marker": { + "line": { + "color": "#000000", + "width": 2 + }, + "colors": ["#FEBFB3", "#E1396C", "#96D38C", "#D0F9B1"] + }, + "textfont": { + "size": 20 + }, + "textinfo": "value", + "hoverinfo": "label+percent", + "labels": ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"], + "values": [4500, 2500, 1053, 500] + } + ], + "layout": {}, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json new file mode 100644 index 0000000000000..63ecd3b2ffa88 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json @@ -0,0 +1,79 @@ +{ + "visualizer": "plotly", + "data": [ + { + "link": { + "color": [ + "rgba(253, 227, 212, 0.5)", + "rgba(242, 116, 32, 1)", + "rgba(253, 227, 212, 0.5)", + "rgba(219, 233, 246, 0.5)", + "rgba(73, 148, 206, 1)", + "rgba(219, 233, 246,0.5)", + "rgba(250, 188, 19, 1)", + "rgba(250, 188, 19, 0.5)", + "rgba(250, 188, 19, 0.5)", + "rgba(127, 194, 65, 1)", + "rgba(127, 194, 65, 0.5)", + "rgba(127, 194, 65, 0.5)", + "rgba(211, 211, 211, 0.5)", + "rgba(211, 211, 211, 0.5)", + "rgba(211, 211, 211, 0.5)" + ], + "value": [20, 3, 5, 14, 1, 1, 3, 17, 2, 3, 9, 2, 5, 9, 8], + "source": [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4], + "target": [5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7] + }, + "node": { + "pad": 10, + "line": { + "color": "black", + "width": 0 + }, + "color": [ + "#F27420", + "#4994CE", + "#FABC13", + "#7FC241", + "#D3D3D3", + "#8A5988", + "#449E9E", + "#D3D3D3", + null, + null, + null, + null, + null, + null, + null + ], + "label": [ + "Remain+No – 28", + "Leave+No – 16", + "Remain+Yes – 21", + "Leave+Yes – 14", + "Didn’t vote in at least one referendum – 21", + "46 – No", + "39 – Yes", + "14 – Don’t know / would not vote" + ], + "thickness": 30 + }, + "type": "sankey", + "domain": { + "x": [0, 1], + "y": [0, 1] + }, + "orientation": "h", + "valueformat": ".0f" + } + ], + "layout": { + "font": { + "size": 10 + }, + "title": "Scottish Referendum Voters who now want Independence", + "height": 772 + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json new file mode 100644 index 0000000000000..8f3aa18704339 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json @@ -0,0 +1,911 @@ +{ + "visualizer": "plotly", + "data": [ + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x1", + "yaxis": "y1", + "visible": false + }, + { + "type": "bar", + "x": [6.4], + "y": [0], + "xaxis": "x2", + "yaxis": "y2", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [12], + "y": [0], + "width": 0.2, + "xaxis": "x2", + "yaxis": "y2", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [17], + "y": [0], + "xaxis": "x2", + "yaxis": "y2", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [5, 6, 4, 8, 2, 7, 2, 1, 17, 12], + "xaxis": "x3", + "yaxis": "y3", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x4", + "yaxis": "y4", + "visible": false + }, + { + "type": "bar", + "x": [5.7], + "y": [0], + "xaxis": "x5", + "yaxis": "y5", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [8], + "y": [0], + "width": 0.2, + "xaxis": "x5", + "yaxis": "y5", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [10], + "y": [0], + "xaxis": "x5", + "yaxis": "y5", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [2, 5, 7, 8, 9, 10, 4, 1, 3, 8], + "xaxis": "x6", + "yaxis": "y6", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x7", + "yaxis": "y7", + "visible": false + }, + { + "type": "bar", + "x": [4.8], + "y": [0], + "xaxis": "x8", + "yaxis": "y8", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [8], + "y": [0], + "width": 0.2, + "xaxis": "x8", + "yaxis": "y8", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [9], + "y": [0], + "xaxis": "x8", + "yaxis": "y8", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [9, 4, 6, 3, 5, 1, 5, 2, 5, 8], + "xaxis": "x9", + "yaxis": "y9", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x10", + "yaxis": "y10", + "visible": false + }, + { + "type": "bar", + "x": [4.3], + "y": [0], + "xaxis": "x11", + "yaxis": "y11", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [6], + "y": [0], + "width": 0.2, + "xaxis": "x11", + "yaxis": "y11", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [8], + "y": [0], + "xaxis": "x11", + "yaxis": "y11", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [6, 5, 7, 3, 1, 4, 8, 2, 1, 6], + "xaxis": "x12", + "yaxis": "y12", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x13", + "yaxis": "y13", + "visible": false + }, + { + "type": "bar", + "x": [7], + "y": [0], + "xaxis": "x14", + "yaxis": "y14", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [4], + "y": [0], + "width": 0.2, + "xaxis": "x14", + "yaxis": "y14", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [13], + "y": [0], + "xaxis": "x14", + "yaxis": "y14", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [2, 1, 6, 3, 11, 7, 13, 12, 11, 4], + "xaxis": "x15", + "yaxis": "y15", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x16", + "yaxis": "y16", + "visible": false + }, + { + "type": "bar", + "x": [7.7], + "y": [0], + "xaxis": "x17", + "yaxis": "y17", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [14], + "y": [0], + "width": 0.2, + "xaxis": "x17", + "yaxis": "y17", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [14], + "y": [0], + "xaxis": "x17", + "yaxis": "y17", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [3, 4, 5, 2, 12, 8, 14, 5, 10, 14], + "xaxis": "x18", + "yaxis": "y18", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + }, + { + "type": "bar", + "x": [0], + "y": [0], + "xaxis": "x19", + "yaxis": "y19", + "visible": false + }, + { + "type": "bar", + "x": [6.7], + "y": [0], + "xaxis": "x20", + "yaxis": "y20", + "marker": { + "color": "rgb(181,221,232)" + }, + "orientation": "h" + }, + { + "type": "bar", + "x": [5], + "y": [0], + "width": 0.2, + "xaxis": "x20", + "yaxis": "y20", + "marker": { + "color": "rgb(62,151,169)" + }, + "offset": -0.1, + "orientation": "h" + }, + { + "mode": "markers", + "type": "scatter", + "x": [12], + "y": [0], + "xaxis": "x20", + "yaxis": "y20", + "marker": { + "size": 9, + "color": "rgb(5, 101, 161)", + "symbol": "diamond-tall" + } + }, + { + "type": "bar", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [4, 6, 8, 8, 10, 12, 2, 7, 5, 5], + "xaxis": "x21", + "yaxis": "y21", + "marker": { + "color": [ + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(181,221,232)", + "rgb(62,151,169)" + ] + } + } + ], + "layout": { + "title": "Sparkline Chart", + "xaxis1": { + "range": [0, 1], + "anchor": "y1", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis2": { + "anchor": "y2", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis3": { + "anchor": "y3", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis4": { + "range": [0, 1], + "anchor": "y4", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis5": { + "anchor": "y5", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis6": { + "anchor": "y6", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis7": { + "range": [0, 1], + "anchor": "y7", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis8": { + "anchor": "y8", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis9": { + "anchor": "y9", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis1": { + "range": [0, 1], + "anchor": "x1", + "domain": [0.857142857142857, 0.9999999999999998], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis2": { + "anchor": "x2", + "domain": [0.857142857142857, 0.9999999999999998], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis3": { + "anchor": "x3", + "domain": [0.857142857142857, 0.9999999999999998], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis4": { + "range": [0, 1], + "anchor": "x4", + "domain": [0.7142857142857142, 0.857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis5": { + "anchor": "x5", + "domain": [0.7142857142857142, 0.857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis6": { + "anchor": "x6", + "domain": [0.7142857142857142, 0.857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis7": { + "range": [0, 1], + "anchor": "x7", + "domain": [0.5714285714285714, 0.7142857142857142], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis8": { + "anchor": "x8", + "domain": [0.5714285714285714, 0.7142857142857142], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis9": { + "anchor": "x9", + "domain": [0.5714285714285714, 0.7142857142857142], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis10": { + "range": [0, 1], + "anchor": "y10", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis11": { + "anchor": "y11", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis12": { + "anchor": "y12", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis13": { + "range": [0, 1], + "anchor": "y13", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis14": { + "anchor": "y14", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis15": { + "anchor": "y15", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis16": { + "range": [0, 1], + "anchor": "y16", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis17": { + "anchor": "y17", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis18": { + "anchor": "y18", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis19": { + "range": [0, 1], + "anchor": "y19", + "domain": [0, 0.05555555555555555], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis20": { + "anchor": "y20", + "domain": [0.05555555555555555, 0.4444444444444444], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "xaxis21": { + "anchor": "y21", + "domain": [0.4444444444444444, 1], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis10": { + "range": [0, 1], + "anchor": "x10", + "domain": [0.42857142857142855, 0.5714285714285714], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis11": { + "anchor": "x11", + "domain": [0.42857142857142855, 0.5714285714285714], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis12": { + "anchor": "x12", + "domain": [0.42857142857142855, 0.5714285714285714], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis13": { + "range": [0, 1], + "anchor": "x13", + "domain": [0.2857142857142857, 0.42857142857142855], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis14": { + "anchor": "x14", + "domain": [0.2857142857142857, 0.42857142857142855], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis15": { + "anchor": "x15", + "domain": [0.2857142857142857, 0.42857142857142855], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis16": { + "range": [0, 1], + "anchor": "x16", + "domain": [0.14285714285714285, 0.2857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis17": { + "anchor": "x17", + "domain": [0.14285714285714285, 0.2857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis18": { + "anchor": "x18", + "domain": [0.14285714285714285, 0.2857142857142857], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis19": { + "range": [0, 1], + "anchor": "x19", + "domain": [0, 0.14285714285714285], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis20": { + "anchor": "x20", + "domain": [0, 0.14285714285714285], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "yaxis21": { + "anchor": "x21", + "domain": [0, 0.14285714285714285], + "showgrid": false, + "zeroline": false, + "showticklabels": false + }, + "showlegend": false, + "annotations": [ + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "adam", + "xref": "x1", + "yref": "y1", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "andrew", + "xref": "x4", + "yref": "y4", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "michael", + "xref": "x7", + "yref": "y7", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "chris", + "xref": "x10", + "yref": "y10", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "jack", + "xref": "x13", + "yref": "y13", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "robin", + "xref": "x16", + "yref": "y16", + "xanchor": "right", + "showarrow": false + }, + { + "x": 1, + "y": 0.5, + "font": { + "size": 15 + }, + "text": "alex", + "xref": "x19", + "yref": "y19", + "xanchor": "right", + "showarrow": false + }, + { + "x": 0.027777777777777776, + "y": 1.03, + "font": { + "size": 13, + "color": "#0f0f0f" + }, + "text": "name", + "xref": "paper", + "yref": "paper", + "xanchor": "center", + "yanchor": "middle", + "showarrow": false, + "textangle": 0 + }, + { + "x": 0.25, + "y": 1.03, + "font": { + "size": 13, + "color": "#0f0f0f" + }, + "text": "bullet", + "xref": "paper", + "yref": "paper", + "xanchor": "center", + "yanchor": "middle", + "showarrow": false, + "textangle": 0 + }, + { + "x": 0.7222222222222222, + "y": 1.03, + "font": { + "size": 13, + "color": "#0f0f0f" + }, + "text": "bar", + "xref": "paper", + "yref": "paper", + "xanchor": "center", + "yanchor": "middle", + "showarrow": false, + "textangle": 0 + } + ] + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json new file mode 100644 index 0000000000000..03d1923933af3 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json @@ -0,0 +1,1918 @@ +{ + "visualizer": "plotly", + "data": [ + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "labelssrc": "kruthik28:82:746924", + "labels": [], + "valuessrc": "kruthik28:82:6b2b67", + "values": [], + "parentssrc": "kruthik28:82:2cf843", + "parents": [], + "branchvalues": "total" + }, + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "labelssrc": "kruthik28:82:3335c9", + "labels": ["flare"], + "valuessrc": "kruthik28:82:48df68", + "values": [956129], + "parentssrc": "kruthik28:82:84e6ba", + "parents": [""], + "branchvalues": "total" + }, + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "labelssrc": "kruthik28:82:edd325", + "labels": [ + "analytics", + "animate", + "data", + "display", + "flex", + "physics", + "query", + "scale", + "util", + "vis", + "flare" + ], + "valuessrc": "kruthik28:82:29a133", + "values": [48716, 100024, 30284, 24254, 4116, 29934, 89721, 31294, 165157, 432629, 956129], + "parentssrc": "kruthik28:82:11caae", + "parents": ["flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", ""], + "branchvalues": "total" + }, + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "labelssrc": "kruthik28:82:b1b272", + "labels": [ + "cluster", + "graph", + "optimization", + "analytics", + "Easing", + "FunctionSequence", + "interpolate", + "ISchedulable", + "Parallel", + "Pause", + "Scheduler", + "Sequence", + "Transition", + "Transitioner", + "TransitionEvent", + "Tween", + "animate", + "converters", + "DataField", + "DataSchema", + "DataSet", + "DataSource", + "DataTable", + "DataUtil", + "data", + "DirtySprite", + "LineSprite", + "RectSprite", + "TextSprite", + "display", + "FlareVis", + "flex", + "DragForce", + "GravityForce", + "IForce", + "NBodyForce", + "Particle", + "Simulation", + "Spring", + "SpringForce", + "physics", + "AggregateExpression", + "And", + "Arithmetic", + "Average", + "BinaryExpression", + "Comparison", + "CompositeExpression", + "Count", + "DateUtil", + "Distinct", + "Expression", + "ExpressionIterator", + "Fn", + "If", + "IsA", + "Literal", + "Match", + "Maximum", + "methods", + "Minimum", + "Not", + "Or", + "Query", + "Range", + "StringUtil", + "Sum", + "Variable", + "Variance", + "Xor", + "query", + "IScaleMap", + "LinearScale", + "LogScale", + "OrdinalScale", + "QuantileScale", + "QuantitativeScale", + "RootScale", + "Scale", + "ScaleType", + "TimeScale", + "scale", + "Arrays", + "Colors", + "Dates", + "Displays", + "Filter", + "Geometry", + "heap", + "IEvaluable", + "IPredicate", + "IValueProxy", + "math", + "Maths", + "Orientation", + "palette", + "Property", + "Shapes", + "Sort", + "Stats", + "Strings", + "util", + "axis", + "controls", + "data1", + "events", + "legend", + "operator", + "Visualization", + "vis", + "flare" + ], + "valuessrc": "kruthik28:82:ded383", + "values": [ + 15207, 26435, 7074, 48716, 17010, 5842, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, + 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, 4116, 4116, 1082, 1336, 319, + 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, 4141, 933, 5130, 3617, 3240, + 2732, 2039, 1214, 3748, 843, 14326, 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, + 3151, 3770, 2435, 4839, 1756, 4268, 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 10587, 335, 383, + 874, 9346, 17705, 1486, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 33886, 44639, 110583, 7011, 36003, + 183967, 16540, 432629, 956129 + ], + "parentssrc": "kruthik28:82:e903ab", + "parents": [ + "analytics", + "analytics", + "analytics", + "flare", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "flare", + "data", + "data", + "data", + "data", + "data", + "data", + "data", + "flare", + "display", + "display", + "display", + "display", + "flare", + "flex", + "flare", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "flare", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "flare", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "flare", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "util", + "flare", + "vis", + "vis", + "vis", + "vis", + "vis", + "vis", + "vis", + "flare", + "" + ], + "branchvalues": "total" + }, + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "labelssrc": "kruthik28:82:84777d", + "labels": [ + "AgglomerativeCluster", + "CommunityStructure", + "HierarchicalCluster", + "MergeEdge", + "cluster", + "BetweennessCentrality", + "LinkDistance", + "MaxFlowMinCut", + "ShortestPaths", + "SpanningTree", + "graph", + "AspectRatioBanker", + "optimization", + "analytics", + "Easing", + "FunctionSequence", + "ArrayInterpolator", + "ColorInterpolator", + "DateInterpolator", + "Interpolator", + "MatrixInterpolator", + "NumberInterpolator", + "ObjectInterpolator", + "PointInterpolator", + "RectangleInterpolator", + "interpolate", + "ISchedulable", + "Parallel", + "Pause", + "Scheduler", + "Sequence", + "Transition", + "Transitioner", + "TransitionEvent", + "Tween", + "animate", + "Converters", + "DelimitedTextConverter", + "GraphMLConverter", + "IDataConverter", + "JSONConverter", + "converters", + "DataField", + "DataSchema", + "DataSet", + "DataSource", + "DataTable", + "DataUtil", + "data", + "DirtySprite", + "LineSprite", + "RectSprite", + "TextSprite", + "display", + "FlareVis", + "flex", + "DragForce", + "GravityForce", + "IForce", + "NBodyForce", + "Particle", + "Simulation", + "Spring", + "SpringForce", + "physics", + "AggregateExpression", + "And", + "Arithmetic", + "Average", + "BinaryExpression", + "Comparison", + "CompositeExpression", + "Count", + "DateUtil", + "Distinct", + "Expression", + "ExpressionIterator", + "Fn", + "If", + "IsA", + "Literal", + "Match", + "Maximum", + "add", + "and", + "average", + "count", + "distinct", + "div", + "eq", + "fn", + "gt", + "gte", + "iff", + "isa", + "lt", + "lte", + "max", + "min", + "mod", + "mul", + "neq", + "not", + "or", + "orderby", + "range", + "select", + "stddev", + "sub", + "sum", + "update", + "variance", + "where", + "xor", + "_", + "methods", + "Minimum", + "Not", + "Or", + "Query", + "Range", + "StringUtil", + "Sum", + "Variable", + "Variance", + "Xor", + "query", + "IScaleMap", + "LinearScale", + "LogScale", + "OrdinalScale", + "QuantileScale", + "QuantitativeScale", + "RootScale", + "Scale", + "ScaleType", + "TimeScale", + "scale", + "Arrays", + "Colors", + "Dates", + "Displays", + "Filter", + "Geometry", + "FibonacciHeap", + "HeapNode", + "heap", + "IEvaluable", + "IPredicate", + "IValueProxy", + "DenseMatrix", + "IMatrix", + "SparseMatrix", + "math", + "Maths", + "Orientation", + "ColorPalette", + "Palette", + "ShapePalette", + "SizePalette", + "palette", + "Property", + "Shapes", + "Sort", + "Stats", + "Strings", + "util", + "Axes", + "Axis", + "AxisGridLine", + "AxisLabel", + "CartesianAxes", + "axis", + "AnchorControl", + "ClickControl", + "Control", + "ControlList", + "DragControl", + "ExpandControl", + "HoverControl", + "IControl", + "PanZoomControl", + "SelectionControl", + "TooltipControl", + "controls", + "Data", + "DataList", + "DataSprite", + "EdgeSprite", + "NodeSprite", + "render", + "ScaleBinding", + "Tree", + "TreeBuilder", + "data1", + "DataEvent", + "SelectionEvent", + "TooltipEvent", + "VisualizationEvent", + "events", + "Legend", + "LegendItem", + "LegendRange", + "legend", + "distortion", + "encoder", + "filter", + "IOperator", + "label", + "layout", + "Operator", + "OperatorList", + "OperatorSequence", + "OperatorSwitch", + "SortOperator", + "operator", + "Visualization", + "vis", + "flare" + ], + "valuessrc": "kruthik28:82:a956d9", + "values": [ + 3938, 3812, 6714, 743, 15207, 3534, 5731, 7840, 5914, 3416, 26435, 7074, 7074, 48716, 17010, 5842, 1983, 2047, + 1375, 8746, 2202, 1382, 1629, 1675, 2042, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, + 721, 4294, 9800, 1314, 2220, 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, + 4116, 4116, 1082, 1336, 319, 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, + 4141, 933, 5130, 3617, 3240, 2732, 2039, 1214, 3748, 843, 593, 330, 287, 277, 292, 595, 594, 460, 603, 625, 748, + 461, 597, 619, 283, 283, 591, 603, 599, 386, 323, 307, 772, 296, 363, 600, 280, 307, 335, 299, 354, 264, 14326, + 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, 3151, 3770, 2435, 4839, 1756, 4268, + 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 9354, 1233, 10587, 335, 383, 874, 3165, 2815, 3366, + 9346, 17705, 1486, 6367, 1229, 2059, 2291, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 1302, 24593, 652, 636, + 6703, 33886, 2138, 3824, 1353, 4665, 2649, 2832, 4896, 763, 5222, 7862, 8435, 44639, 20544, 19788, 10349, 3301, + 19382, 8867, 11275, 7147, 9930, 110583, 2313, 1880, 1701, 1117, 7011, 20859, 4614, 10530, 36003, 14219, 14897, + 11893, 1286, 17057, 108083, 2490, 5248, 4190, 2581, 2023, 183967, 16540, 432629, 956129 + ], + "parentssrc": "kruthik28:82:731715", + "parents": [ + "cluster", + "cluster", + "cluster", + "cluster", + "analytics", + "graph", + "graph", + "graph", + "graph", + "graph", + "analytics", + "optimization", + "analytics", + "flare", + "animate", + "animate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "flare", + "converters", + "converters", + "converters", + "converters", + "converters", + "data", + "data", + "data", + "data", + "data", + "data", + "data", + "flare", + "display", + "display", + "display", + "display", + "flare", + "flex", + "flare", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "flare", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "flare", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "flare", + "util", + "util", + "util", + "util", + "util", + "util", + "heap", + "heap", + "util", + "util", + "util", + "util", + "math", + "math", + "math", + "util", + "util", + "util", + "palette", + "palette", + "palette", + "palette", + "util", + "util", + "util", + "util", + "util", + "util", + "flare", + "axis", + "axis", + "axis", + "axis", + "axis", + "vis", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "vis", + "data1", + "data1", + "data1", + "data1", + "data1", + "data1", + "data1", + "data1", + "data1", + "vis", + "events", + "events", + "events", + "events", + "vis", + "legend", + "legend", + "legend", + "vis", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "vis", + "vis", + "flare", + "" + ], + "branchvalues": "total" + }, + { + "root": { + "color": "#f1f1f1" + }, + "type": "treemap", + "visible": true, + "labelssrc": "kruthik28:82:b6a3bf", + "labels": [ + "AgglomerativeCluster", + "CommunityStructure", + "HierarchicalCluster", + "MergeEdge", + "cluster", + "BetweennessCentrality", + "LinkDistance", + "MaxFlowMinCut", + "ShortestPaths", + "SpanningTree", + "graph", + "AspectRatioBanker", + "optimization", + "analytics", + "Easing", + "FunctionSequence", + "ArrayInterpolator", + "ColorInterpolator", + "DateInterpolator", + "Interpolator", + "MatrixInterpolator", + "NumberInterpolator", + "ObjectInterpolator", + "PointInterpolator", + "RectangleInterpolator", + "interpolate", + "ISchedulable", + "Parallel", + "Pause", + "Scheduler", + "Sequence", + "Transition", + "Transitioner", + "TransitionEvent", + "Tween", + "animate", + "Converters", + "DelimitedTextConverter", + "GraphMLConverter", + "IDataConverter", + "JSONConverter", + "converters", + "DataField", + "DataSchema", + "DataSet", + "DataSource", + "DataTable", + "DataUtil", + "data", + "DirtySprite", + "LineSprite", + "RectSprite", + "TextSprite", + "display", + "FlareVis", + "flex", + "DragForce", + "GravityForce", + "IForce", + "NBodyForce", + "Particle", + "Simulation", + "Spring", + "SpringForce", + "physics", + "AggregateExpression", + "And", + "Arithmetic", + "Average", + "BinaryExpression", + "Comparison", + "CompositeExpression", + "Count", + "DateUtil", + "Distinct", + "Expression", + "ExpressionIterator", + "Fn", + "If", + "IsA", + "Literal", + "Match", + "Maximum", + "add", + "and", + "average", + "count", + "distinct", + "div", + "eq", + "fn", + "gt", + "gte", + "iff", + "isa", + "lt", + "lte", + "max", + "min", + "mod", + "mul", + "neq", + "not", + "or", + "orderby", + "range", + "select", + "stddev", + "sub", + "sum", + "update", + "variance", + "where", + "xor", + "_", + "methods", + "Minimum", + "Not", + "Or", + "Query", + "Range", + "StringUtil", + "Sum", + "Variable", + "Variance", + "Xor", + "query", + "IScaleMap", + "LinearScale", + "LogScale", + "OrdinalScale", + "QuantileScale", + "QuantitativeScale", + "RootScale", + "Scale", + "ScaleType", + "TimeScale", + "scale", + "Arrays", + "Colors", + "Dates", + "Displays", + "Filter", + "Geometry", + "FibonacciHeap", + "HeapNode", + "heap", + "IEvaluable", + "IPredicate", + "IValueProxy", + "DenseMatrix", + "IMatrix", + "SparseMatrix", + "math", + "Maths", + "Orientation", + "ColorPalette", + "Palette", + "ShapePalette", + "SizePalette", + "palette", + "Property", + "Shapes", + "Sort", + "Stats", + "Strings", + "util", + "Axes", + "Axis", + "AxisGridLine", + "AxisLabel", + "CartesianAxes", + "axis", + "AnchorControl", + "ClickControl", + "Control", + "ControlList", + "DragControl", + "ExpandControl", + "HoverControl", + "IControl", + "PanZoomControl", + "SelectionControl", + "TooltipControl", + "controls", + "Data", + "DataList", + "DataSprite", + "EdgeSprite", + "NodeSprite", + "ArrowType", + "EdgeRenderer", + "IRenderer", + "ShapeRenderer", + "render", + "ScaleBinding", + "Tree", + "TreeBuilder", + "data1", + "DataEvent", + "SelectionEvent", + "TooltipEvent", + "VisualizationEvent", + "events", + "Legend", + "LegendItem", + "LegendRange", + "legend", + "BifocalDistortion", + "Distortion", + "FisheyeDistortion", + "distortion", + "ColorEncoder", + "Encoder", + "PropertyEncoder", + "ShapeEncoder", + "SizeEncoder", + "encoder", + "FisheyeTreeFilter", + "GraphDistanceFilter", + "VisibilityFilter", + "filter", + "IOperator", + "Labeler", + "RadialLabeler", + "StackedAreaLabeler", + "label", + "AxisLayout", + "BundledEdgeRouter", + "CircleLayout", + "CirclePackingLayout", + "DendrogramLayout", + "ForceDirectedLayout", + "IcicleTreeLayout", + "IndentedTreeLayout", + "Layout", + "NodeLinkTreeLayout", + "PieLayout", + "RadialTreeLayout", + "RandomLayout", + "StackedAreaLayout", + "TreeMapLayout", + "layout", + "Operator", + "OperatorList", + "OperatorSequence", + "OperatorSwitch", + "SortOperator", + "operator", + "Visualization", + "vis", + "flare" + ], + "valuessrc": "kruthik28:82:1bfe04", + "values": [ + 3938, 3812, 6714, 743, 15207, 3534, 5731, 7840, 5914, 3416, 26435, 7074, 7074, 48716, 17010, 5842, 1983, 2047, + 1375, 8746, 2202, 1382, 1629, 1675, 2042, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, + 721, 4294, 9800, 1314, 2220, 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, + 4116, 4116, 1082, 1336, 319, 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, + 4141, 933, 5130, 3617, 3240, 2732, 2039, 1214, 3748, 843, 593, 330, 287, 277, 292, 595, 594, 460, 603, 625, 748, + 461, 597, 619, 283, 283, 591, 603, 599, 386, 323, 307, 772, 296, 363, 600, 280, 307, 335, 299, 354, 264, 14326, + 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, 3151, 3770, 2435, 4839, 1756, 4268, + 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 9354, 1233, 10587, 335, 383, 874, 3165, 2815, 3366, + 9346, 17705, 1486, 6367, 1229, 2059, 2291, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 1302, 24593, 652, 636, + 6703, 33886, 2138, 3824, 1353, 4665, 2649, 2832, 4896, 763, 5222, 7862, 8435, 44639, 20544, 19788, 10349, 3301, + 19382, 698, 5569, 353, 2247, 8867, 11275, 7147, 9930, 110583, 2313, 1880, 1701, 1117, 7011, 20859, 4614, 10530, + 36003, 4461, 6314, 3444, 14219, 3179, 4060, 4138, 1690, 1830, 14897, 5219, 3165, 3509, 11893, 1286, 9956, 3899, + 3202, 17057, 6725, 3727, 9317, 12003, 4853, 8411, 4864, 3174, 7881, 12870, 2728, 12348, 870, 9121, 9191, 108083, + 2490, 5248, 4190, 2581, 2023, 183967, 16540, 432629, 956129 + ], + "parentssrc": "kruthik28:82:77b4ad", + "parents": [ + "cluster", + "cluster", + "cluster", + "cluster", + "analytics", + "graph", + "graph", + "graph", + "graph", + "graph", + "analytics", + "optimization", + "analytics", + "flare", + "animate", + "animate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "interpolate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "animate", + "flare", + "converters", + "converters", + "converters", + "converters", + "converters", + "data", + "data", + "data", + "data", + "data", + "data", + "data", + "flare", + "display", + "display", + "display", + "display", + "flare", + "flex", + "flare", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "physics", + "flare", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "methods", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "query", + "flare", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "scale", + "flare", + "util", + "util", + "util", + "util", + "util", + "util", + "heap", + "heap", + "util", + "util", + "util", + "util", + "math", + "math", + "math", + "util", + "util", + "util", + "palette", + "palette", + "palette", + "palette", + "util", + "util", + "util", + "util", + "util", + "util", + "flare", + "axis", + "axis", + "axis", + "axis", + "axis", + "vis", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "controls", + "vis", + "data1", + "data1", + "data1", + "data1", + "data1", + "render", + "render", + "render", + "render", + "data1", + "data1", + "data1", + "data1", + "vis", + "events", + "events", + "events", + "events", + "vis", + "legend", + "legend", + "legend", + "vis", + "distortion", + "distortion", + "distortion", + "operator", + "encoder", + "encoder", + "encoder", + "encoder", + "encoder", + "operator", + "filter", + "filter", + "filter", + "operator", + "operator", + "label", + "label", + "label", + "operator", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "layout", + "operator", + "operator", + "operator", + "operator", + "operator", + "operator", + "vis", + "vis", + "flare", + "" + ], + "branchvalues": "total" + } + ], + "layout": { + "width": 900, + "height": 900, + "margin": { + "b": 40, + "l": 100, + "r": 100, + "t": 0 + }, + "sliders": [ + { + "pad": { + "t": 5 + }, + "steps": [ + { + "args": [ + { + "visible": [true, false, false, false, false, false] + } + ], + "method": "update" + }, + { + "args": [ + { + "visible": [false, true, false, false, false, false] + } + ], + "method": "update" + }, + { + "args": [ + { + "visible": [false, false, true, false, false, false] + } + ], + "method": "update" + }, + { + "args": [ + { + "visible": [false, false, false, true, false, false] + } + ], + "method": "update" + }, + { + "args": [ + { + "visible": [false, false, false, false, true, false] + } + ], + "method": "update" + }, + { + "args": [ + { + "visible": [false, false, false, false, false, true] + } + ], + "method": "update" + } + ], + "active": 5, + "currentvalue": { + "prefix": "Depth: " + } + } + ], + "template": { + "data": { + "bar": [ + { + "type": "bar", + "marker": { + "line": { + "color": "#E5ECF6", + "width": 0.5 + }, + "pattern": { + "size": 10, + "fillmode": "overlay", + "solidity": 0.2 + } + }, + "error_x": { + "color": "#2a3f5f" + }, + "error_y": { + "color": "#2a3f5f" + } + } + ], + "pie": [ + { + "type": "pie", + "automargin": true + } + ], + "table": [ + { + "type": "table", + "cells": { + "fill": { + "color": "#EBF0F8" + }, + "line": { + "color": "white" + } + }, + "header": { + "fill": { + "color": "#C8D4E3" + }, + "line": { + "color": "white" + } + } + } + ], + "carpet": [ + { + "type": "carpet", + "aaxis": { + "gridcolor": "white", + "linecolor": "white", + "endlinecolor": "#2a3f5f", + "minorgridcolor": "white", + "startlinecolor": "#2a3f5f" + }, + "baxis": { + "gridcolor": "white", + "linecolor": "white", + "endlinecolor": "#2a3f5f", + "minorgridcolor": "white", + "startlinecolor": "#2a3f5f" + } + } + ], + "mesh3d": [ + { + "type": "mesh3d", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + ], + "contour": [ + { + "type": "contour", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ], + "heatmap": [ + { + "type": "heatmap", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ], + "scatter": [ + { + "type": "scatter", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "surface": [ + { + "type": "surface", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ], + "barpolar": [ + { + "type": "barpolar", + "marker": { + "line": { + "color": "#E5ECF6", + "width": 0.5 + }, + "pattern": { + "size": 10, + "fillmode": "overlay", + "solidity": 0.2 + } + } + } + ], + "heatmapgl": [ + { + "type": "heatmapgl", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ], + "histogram": [ + { + "type": "histogram", + "marker": { + "pattern": { + "size": 10, + "fillmode": "overlay", + "solidity": 0.2 + } + } + } + ], + "parcoords": [ + { + "line": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + }, + "type": "parcoords" + } + ], + "scatter3d": [ + { + "line": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + }, + "type": "scatter3d", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "scattergl": [ + { + "type": "scattergl", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "choropleth": [ + { + "type": "choropleth", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + ], + "scattergeo": [ + { + "type": "scattergeo", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "histogram2d": [ + { + "type": "histogram2d", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ], + "scatterpolar": [ + { + "type": "scatterpolar", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "contourcarpet": [ + { + "type": "contourcarpet", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + ], + "scattercarpet": [ + { + "type": "scattercarpet", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "scattermapbox": [ + { + "type": "scattermapbox", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "scatterpolargl": [ + { + "type": "scatterpolargl", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "scatterternary": [ + { + "type": "scatterternary", + "marker": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + } + } + ], + "histogram2dcontour": [ + { + "type": "histogram2dcontour", + "colorbar": { + "ticks": "", + "outlinewidth": 0 + }, + "colorscale": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + } + ] + }, + "layout": { + "geo": { + "bgcolor": "white", + "showland": true, + "lakecolor": "white", + "landcolor": "#E5ECF6", + "showlakes": true, + "subunitcolor": "white" + }, + "font": { + "color": "#2a3f5f" + }, + "polar": { + "bgcolor": "#E5ECF6", + "radialaxis": { + "ticks": "", + "gridcolor": "white", + "linecolor": "white" + }, + "angularaxis": { + "ticks": "", + "gridcolor": "white", + "linecolor": "white" + } + }, + "scene": { + "xaxis": { + "ticks": "", + "gridcolor": "white", + "gridwidth": 2, + "linecolor": "white", + "zerolinecolor": "white", + "showbackground": true, + "backgroundcolor": "#E5ECF6" + }, + "yaxis": { + "ticks": "", + "gridcolor": "white", + "gridwidth": 2, + "linecolor": "white", + "zerolinecolor": "white", + "showbackground": true, + "backgroundcolor": "#E5ECF6" + }, + "zaxis": { + "ticks": "", + "gridcolor": "white", + "gridwidth": 2, + "linecolor": "white", + "zerolinecolor": "white", + "showbackground": true, + "backgroundcolor": "#E5ECF6" + } + }, + "title": { + "x": 0.05 + }, + "xaxis": { + "ticks": "", + "title": { + "standoff": 15 + }, + "gridcolor": "white", + "linecolor": "white", + "automargin": true, + "zerolinecolor": "white", + "zerolinewidth": 2 + }, + "yaxis": { + "ticks": "", + "title": { + "standoff": 15 + }, + "gridcolor": "white", + "linecolor": "white", + "automargin": true, + "zerolinecolor": "white", + "zerolinewidth": 2 + }, + "mapbox": { + "style": "light" + }, + "ternary": { + "aaxis": { + "ticks": "", + "gridcolor": "white", + "linecolor": "white" + }, + "baxis": { + "ticks": "", + "gridcolor": "white", + "linecolor": "white" + }, + "caxis": { + "ticks": "", + "gridcolor": "white", + "linecolor": "white" + }, + "bgcolor": "#E5ECF6" + }, + "colorway": [ + "#636efa", + "#EF553B", + "#00cc96", + "#ab63fa", + "#FFA15A", + "#19d3f3", + "#FF6692", + "#B6E880", + "#FF97FF", + "#FECB52" + ], + "coloraxis": { + "colorbar": { + "ticks": "", + "outlinewidth": 0 + } + }, + "hovermode": "closest", + "colorscale": { + "diverging": [ + [0, "#8e0152"], + [0.1, "#c51b7d"], + [0.2, "#de77ae"], + [0.3, "#f1b6da"], + [0.4, "#fde0ef"], + [0.5, "#f7f7f7"], + [0.6, "#e6f5d0"], + [0.7, "#b8e186"], + [0.8, "#7fbc41"], + [0.9, "#4d9221"], + [1, "#276419"] + ], + "sequential": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ], + "sequentialminus": [ + [0, "#0d0887"], + [0.1111111111111111, "#46039f"], + [0.2222222222222222, "#7201a8"], + [0.3333333333333333, "#9c179e"], + [0.4444444444444444, "#bd3786"], + [0.5555555555555556, "#d8576b"], + [0.6666666666666666, "#ed7953"], + [0.7777777777777778, "#fb9f3a"], + [0.8888888888888888, "#fdca26"], + [1, "#f0f921"] + ] + }, + "hoverlabel": { + "align": "left" + }, + "plot_bgcolor": "#E5ECF6", + "paper_bgcolor": "white", + "shapedefaults": { + "line": { + "color": "#2a3f5f" + } + }, + "autotypenumbers": "strict", + "annotationdefaults": { + "arrowhead": 0, + "arrowcolor": "#2a3f5f", + "arrowwidth": 1 + } + } + } + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json new file mode 100644 index 0000000000000..98a7dd5c94f17 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json @@ -0,0 +1,79 @@ +{ + "visualizer": "plotly", + "data": [ + { + "type": "bar", + "x": [ + 78.31759529851323, 98.09122764296625, 117.86485998741925, 137.63849233187221, 157.41212467632522, + 177.18575702077828, 196.95938936523132, 216.7330217096843, 236.5066540541373, 256.28028639859036 + ], + "y": [0, 0, 0, 33, 84, 250, 304, 221, 85, 23], + "xaxis": "x1", + "yaxis": "y1", + "marker": { + "line": { + "width": 1 + }, + "color": "#0000FF" + }, + "opacity": 1, + "orientation": "v" + }, + { + "type": "bar", + "x": [ + 86.22704823629445, 106.00068058074744, 125.77431292520045, 145.54794526965344, 165.32157761410645, + 185.09520995855948, 204.8688423030125, 224.64247464746552, 244.41610699191853, 264.18973933637153 + ], + "y": [9, 51, 177, 283, 264, 162, 47, 6, 1, 0], + "xaxis": "x1", + "yaxis": "y1", + "marker": { + "line": { + "width": 1 + }, + "color": "#007F00" + }, + "opacity": 1, + "orientation": "v" + } + ], + "layout": { + "bargap": 11.864179406671795, + "xaxis1": { + "side": "bottom", + "type": "linear", + "range": [50, 300], + "ticks": "inside", + "anchor": "y1", + "domain": [0, 1], + "mirror": "ticks", + "nticks": 6, + "showgrid": false, + "showline": true, + "tickfont": { + "size": 12 + }, + "zeroline": false + }, + "yaxis1": { + "side": "left", + "type": "linear", + "range": [0, 350], + "ticks": "inside", + "anchor": "x1", + "domain": [0, 1], + "mirror": "ticks", + "nticks": 8, + "showgrid": false, + "showline": true, + "tickfont": { + "size": 12 + }, + "zeroline": false + }, + "hovermode": "closest", + "showlegend": false + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json new file mode 100644 index 0000000000000..9094067577064 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json @@ -0,0 +1,103 @@ +{ + "visualizer": "plotly", + "data": [ + { + "fill": "tonexty", + "line": { + "color": "rgba(255, 153, 51, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "a", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754, + 0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841 + ], + "fillcolor": "rgba(255, 153, 51, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(55, 128, 191, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "b", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392, + 1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878 + ], + "fillcolor": "rgba(55, 128, 191, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(50, 171, 96, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "c", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358, + 1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171 + ], + "fillcolor": "rgba(50, 171, 96, 0.3)" + }, + { + "fill": "tonexty", + "line": { + "color": "rgba(128, 0, 128, 1.0)", + "width": "1.3" + }, + "mode": "lines", + "name": "d", + "type": "scatter", + "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + "y": [ + 1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149, + 2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654 + ], + "fillcolor": "rgba(128, 0, 128, 0.3)" + } + ], + "layout": { + "legend": { + "font": { + "color": "#4D5663" + }, + "bgcolor": "#F5F6F9" + }, + "xaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "yaxis1": { + "title": "", + "tickfont": { + "color": "#4D5663" + }, + "zeroline": false, + "gridcolor": "#E1E5ED", + "titlefont": { + "color": "#4D5663" + }, + "zerolinecolor": "#E1E5ED" + }, + "plot_bgcolor": "#F5F6F9", + "paper_bgcolor": "#F5F6F9" + }, + "frames": [] +} diff --git a/packages/react-examples/src/react-charting/demo/AppDefinition.tsx b/packages/react-examples/src/react-charting/demo/AppDefinition.tsx index ca16f48db45b9..5ea29d40d44ba 100644 --- a/packages/react-examples/src/react-charting/demo/AppDefinition.tsx +++ b/packages/react-examples/src/react-charting/demo/AppDefinition.tsx @@ -111,6 +111,12 @@ export const AppDefinition: IAppDefinition = { name: 'Horizontal Bar Chart With Axis', url: '#/examples/HorizontalBarChartWithAxis', }, + { + component: require('../DeclarativeChart/DeclarativeChartPage').DeclarativeChartPage, + key: 'DeclarativeChart', + name: 'Declarative Chart', + url: '#/examples/declarativechart', + }, ], }, ], From 1c25e07ac3d543d4e8b5f76b9afdbca24aeb6e61 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 25 Nov 2024 13:33:36 +0530 Subject: [PATCH 04/22] Fix vertical bar histogram schema --- .../schema/fluent_verticalbar_histogram.json | 731 ++++++++++++++++-- 1 file changed, 665 insertions(+), 66 deletions(-) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json index 9094067577064..4745368ea83d9 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json @@ -2,102 +2,701 @@ "visualizer": "plotly", "data": [ { - "fill": "tonexty", - "line": { - "color": "rgba(255, 153, 51, 1.0)", - "width": "1.3" - }, - "mode": "lines", + "uid": "a58c38f5-f6a6-4b4d-8f94-07e5434e2063", "name": "a", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754, - 0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841 + "type": "histogram", + "x": [ + 1.7992564437777885, 0.05779580359302183, 1.5134306451845885, 0.3914013884637312, -0.11969533034200497, + -0.5139373299202106, 0.32142776505891857, 2.313965687838981, 0.1313874805632831, 3.917327494517987, + 1.4773032646481492, -0.9109227115334932, 0.7599616936194599, 2.1104123608688123, 0.31412192646017323, + 2.0633800190292506, 0.417801977542291, 2.741354310412407, -0.04273212212771793, -1.0996174774744212, + 1.1634605321836873, 0.050435185187588605, 0.8709019344644338, 0.5483759550743046, -0.9632190023703564, + 1.4254673343221542, -0.11834711820656141, 0.7272853323757995, 1.0165475637905812, 1.9600898808756693, + 1.684523196352575, 0.21989073136972614, 1.4373173920954938, 1.35068323813271, 1.2082253229376725, + 1.0024946206107124, 1.0912034859692132, 1.394093750990316, 0.15381570948969037, 1.572778151817132, + 1.3145990861101873, 1.0590366743769009, 0.7378641746889019, 1.4376166187176542, 2.1920348524405986, + 2.8258626879622284, -0.738792921197468, -0.6654164350138787, 0.8832266749764874, 1.0563869413346711, + 2.012291462559541, -0.8081967975015514, -1.1842825882088035, 0.9640286143816317, 1.001083604005719, + 0.823496575437699, 0.07981471961188535, -1.0887151086105633, 2.2813972361639836, 0.8865705596306114, + 0.8657022019728764, -0.16279733641041894, -0.5586597880489619, 0.7382087744796277, 1.0527131459569035, + 1.1428187529021478, 0.09914241999126061, 0.7000511587033809, 0.6150725845961333, 1.250735301284068, + 1.3280548256601055, 1.4186651866714681, 1.5541905345980815, 0.10785164030299477, 2.443004259511542, + 1.9095913702824938, 0.7004419083140948, 1.4113632085994499, 1.4139325035008095, 0.47532535496539086, + 1.9377217880970339, 1.9530293129448117, 2.826030369070281, 1.0188032768441608, 2.4963673283862846, + 1.5002317584300138, 1.6749354318678575, 1.557810338878444, 3.260335742383798, 2.7135036230531187, + -0.7875434249482567, 2.1884165446637294, 1.4148295620644604, 1.4043675796166526, 0.5860810303122439, + 0.5880779684020552, 1.292885245350062, 1.9446057825215435, 1.2681551767507135, 0.6361744786578738, + 2.419010053709061, 1.476506036172426, -0.406984190128878, 1.4883052014477953, 0.2362631775078744, + 2.052457913674718, 0.919126684410074, 0.3627930834038261, 0.9995681055485067, 1.2786851133470762, + 1.88091579608581, 2.307653076107352, 1.9983233226921344, 0.8963257808467161, -0.35477422744941545, + 0.8202205819349409, 0.9877279413898287, -0.33245824354397446, 0.8845371548645357, 0.16429534411459312, + 0.15425988582516792, 1.9092466485573727, 1.6856813757793578, 2.4778913108189924, 1.2264293859196442, + 1.2066934020481703, 0.7094133857792155, -0.6974506712635016, 0.6351965331244696, -0.5745812246342736, + 0.9681806434527394, 1.3721006584092403, 1.3863696537062076, 0.5161064334216514, -0.27925937323389616, + -0.04378152198437446, 3.584261091320433, 0.9124807527304252, 1.0698812014525427, 1.1693505687858963, + -0.35661855152179345, 0.03998168348604492, 0.6511489854178798, 0.4050757350866182, 0.8398416524720245, + -0.3199493956399764, 2.489870130774302, 0.9195697963323227, 0.446272936321951, 0.6293343998549384, + 1.5129447471342545, 2.2875473778527695, 0.47716508695641136, 2.1236906002276745, 1.4828559276369087, + 0.6380262251101524, 2.729430311117608, 2.1176404694918354, 0.7328309112672804, -0.2466211471665054, + 0.2574691202956615, 2.2019663578593898, 1.082082632442427, 1.5172285786551658, 1.3179716266483459, + 0.9352644340838197, 1.9368012654766131, 0.6019067073062221, 0.3676121339524441, 0.6909774354426849, + -0.30274401723879074, -1.3521102868472061, 0.6918937694215814, 1.6292324049460971, 0.1507275531304314, + -0.25220968558062196, -0.31559338640317525, 0.07601910508447174, 0.768824535203562, 1.524675869943278, + 0.5161062518475145, 0.9297123926434617, 0.04298734085876699, 1.683284666747905, 1.1112677270404492, + 1.0671605796105683, -0.9676277150386134, 0.27444284402297925, 1.172868652344203, 0.9615013126991171, + -0.09647067435769441, 3.145379385247912, 0.5555538049386326, 2.3755629446672186, 2.4649835140338716, + -1.2095472925733834, 2.7460173137785904, 0.0541756956951549, 1.0958997065940062, 2.8103268910278505, + 1.7570583127148565, 2.373785054421019, 0.005844170445054031, 0.9313199634004647, 0.5565657574376377, + 1.263138467526412, 2.4412257236660664, 0.8420413733307475, -0.3243568257666718, 0.5485173278748381, + 2.1602571844613827, -0.3013214548367871, 0.6222351937146695, 1.898536544875012, 2.5426161399653937, + -0.44754180053616377, 2.2847454056096153, 1.6260372076971144, 2.010405770332185, -0.18102618787353753, + 3.516018953597978, 1.2177743852240588, 0.9608770156504653, 0.9883239851364751, 0.5560578461000198, + -0.45606879507964715, 2.145285349306212, -0.37930005486618557, 1.7112473046914842, -0.4588888223883527, + 2.8928842799503975, 0.14292799208181584, 0.7352829253915387, 0.7632116961043758, 1.8158856926218883, + 0.19331239277079704, 1.886103944734376, -0.06200921897768907, 0.6285305645271686, 0.956342047579559, + 1.4550323013518107, 1.9239359365679745, 0.6830568015251277, -0.5281812821592153, 0.8718941680183343, + -0.39916517735287127, 1.246049581578422, 0.6218344568230643, 1.256204664683573, 1.2754693222270703, + 1.1672493869167195, -0.2194459527939645, 2.754450459156036, -0.8963591391141821, -0.4571893280808701, + 2.4819434902804094, 0.9645864746055925, 1.0364931785298164, 1.150284233325339, 1.878344167033501, + 2.347962971022697, 0.6715422800115376, 2.3772755272750423, -0.28379549763240175, 1.4532684457778702, + 2.5674129903767025, 2.2946555714497334, 0.7690746832477149, 1.5418418331243509, 0.6560644032509522, + 0.255574087455425, 1.6914180551398617, 1.2719595929524, 0.5056559302899697, 2.3594940732494543, + 1.1903690407317626, 2.1203166777462767, 1.5468301100001858, 0.9983035399538878, 1.3426694633836393, + 1.2530567859889332, -0.058612958303870144, 1.7013481027959663, 2.0671325297544514, 0.5289282652759798, + 1.693717215090481, 1.9561623687030254, 1.8850619277472735, 1.7088780864251623, -0.18425757789538255, + -0.18373679472310434, 2.6738937892593375, 1.5963554731996412, 0.9915311370318989, 0.9358297139086073, + 2.218194962403288, 1.5131686121952947, 0.6842963039363943, 2.6571849088006667, 1.7185669569983792, + 0.406147413712975, 2.9872066492095826, 1.256135794787258, -0.05233846558622712, 3.2502971683620245, + -1.060253995089893, 1.9344116284004147, -1.391209198708665, 1.8336300206896556, 1.2493557837324984, + 2.660080468459796, -0.07533566100611533, 1.2750273643034684, 1.6358548224610199, 0.7737538646212196, + 0.8326351949551917, 0.6048334113573071, 0.07024065729722151, 2.2863421015077208, 3.5576220046921994, + 1.3868904734370509, -0.4233814303255623, 0.8870053717058879, 0.9602326267443417, -0.20761873649244, + 0.8608673256323256, 0.04762383293746508, 1.8298623824151894, 1.8851654479524642, -0.5454173962959787, + 0.48791551024611235, 2.3521458066868943, 1.8512560861689917, 0.2853560659548291, 2.3196619940996364, + -0.8663787664214817, 0.6777231912389844, 2.642024604956757, 1.9006852208902836, 1.584362827552154, + 1.3177340141949063, -0.5531330479564598, 1.3645799493544255, 2.2041108487874235, 0.9739109838009927, + 1.2042520375301562, 0.6904698695650664, 0.8859940196353442, 1.212645286808484, 1.13290564547174, + -1.3101516074201358, 3.130216420210678, 1.8287295799032357, 2.225590468814803, 0.4787508136792987, + -0.5399446731509081, 1.9231558380834213, 2.317765200789225, 2.0938656924871966, 0.648022904920668, + 1.2192152097279316, 1.3071179121799936, 0.36087653490873817, 2.020984355125307, -0.6676209734775458, + 0.2329092663845419, -0.1279210447235133, 1.257991640951116, 1.3362651903384877, 0.7759516583222761, + 1.1141135044065376, -0.20873154134476546, 1.4815676403945832, 0.3645229894316946, 0.4795253059399903, + -0.7616395497522817, -0.8246297762955701, 1.1777003408725564, 1.007643347257193, -0.4399349444288825, + 1.0315144851710472, 0.16629692756239312, -0.5949527106611434, 1.964918822432896, 1.4182711176936047, + 2.1244550205643185, 0.8680413628067739, 0.8182596481508461, 1.5192554377297096, 0.48210227012285, + 1.538965778668858, -0.8834895343868825, 2.229296839993378, 1.3737044269020504, 0.5094151172920589, + -1.0727797638787773, 0.7761725881745586, 1.862121314778132, 1.9488284440304922, 0.29185375993808005, + 0.6384788090956188, -0.3431957087322153, 2.9325408707861884, -0.5680734858758762, 1.3095541355520544, + 1.8146352363354845, 1.478492443854311, 0.9817996426269806, 2.2133822167860697, 0.982838640548402, + 1.2450170632313666, 1.3193736359371244, -1.849316264977697, -0.6889504041818002, 1.040751428210255, + 0.02890269443133786, 3.590110130056901, 0.614449689879796, 1.7889598611077213, 1.5203855018307537, + 0.11560219087913548, 0.6476172637601402, 0.9776316443925304, 0.43639120088595085, 1.9452541571707047, + -0.9128920899928628, 1.8105963045227924, 1.368976170389584, 1.2372397265564588, 0.5232007492971766, + 0.992950260427584, 1.7814003303773465, 0.2987660777209449, 2.4438700525731756, 0.7304148728972943, + 1.9305546115010896, 0.4779804026283916, 1.3761758269096453, 1.1085612186183114, 1.538399508148844, + 0.8263951839132615, 0.31788386853368056, 0.7236430275526036, 2.1563652164636578, 1.796460049711082, + 1.584954489547108, 1.4349337292160382, 0.0025743914839860826, 0.25864142740500595, 0.6216086145857926, + 0.17981395134258327, 0.836340278975011, 0.9223162050338467, 0.7487633192895334, 1.4081533955695802, + 1.1757717479913181, 1.255541770559463, 0.08380876352772215, 1.1182060741735924, 0.9338272530332398, + -0.6145905317441664, 1.0232060948528703, 0.1369411912627122, 2.387108140358447, 1.2260016897691621, + 0.5606967191611573, 0.3020478865727917, 0.6771693300058677, 0.7816963489918528, 0.4010415895324466, + 0.6233883123283104, 0.5727695083340153, -1.1931243506134566, 0.3448007887994159, 1.5848221820090393, + 1.5914175418503587, 1.0543529802763378, 0.23970110132104505, 0.8050916546684623, 3.03870855776943, + 1.83758077023609, 3.639866747514543, 0.06639936058073814, -0.5401390582943686, -0.0551014491131101, + -0.1845360571630339, 1.0814919377215442, 1.0012528137985255, 1.4352871310259006, 0.9829471684470072, + 1.9683436756460164, 0.3685403660141269, -0.36657304635220433, 0.7969766331313638, 0.7573146429710325, + -0.0999127021598627, 1.4218367929227211, 2.4437733635376393, 2.54286390016454, 1.8255964426003177, + 2.059106897349305, -0.14394356122418994, 0.04099842507739737, 0.5775404307711827, 0.8203586535385461, + 0.0889819761695646, 0.6231959813316315, 1.55402923657705, 0.64617596764641, 3.0437353352890164, + 1.8311453472348207, 1.1217623018926788, 1.129221419335285, 1.7247155387917212, -0.0925286589029144, + 0.03166073843786188, 1.6024280010855225, 1.275463787309655, 0.904106062296863, 1.9397803318729219, + 2.767883390841891, 1.1982643524564702, -0.501500241163628, 2.3425217675307373, 1.1597090334070463, + 1.562589228175228, 2.539800869658598, 0.919670262302777, 0.27966487952773234, 0.32439947516731593, + 1.3035617603710143, 2.061532639114384, -0.9807097220175245, 2.4322899716419197, 0.16355014788036393, + 1.109162739662061, 1.997976507527615, 1.9242941436158474, 1.4582163008381643, 3.1138587302433978, + 0.5716087760972477, 2.287502175172394, 1.7518320503775806, 2.4784498461181466, 1.5515443988122533, + 1.1200074031733696, 2.0255245930920553, 1.6711356885534314, 0.6071102010448299, 2.28431478314955, + -0.053302018537180196, 1.0133860679063618, 0.9201784397988596, 1.98628336960116, -0.1942411826064756, + -1.1590599777742536, 1.9758262239782494, 0.28472580634235256, 0.5616336096410678, 2.7963387836761266, + -0.14624850373573262, 0.706932138971843, 0.1534966570543116, 1.5049452484672905, 1.5114555247512003, + 1.0791310961336744, -0.16558294860486322, 1.4694846656975797, 0.8229013337501457, 1.5460648907298757, + 1.2708338866418858, 0.5555076997574024, -0.08212607433940877, 1.3671742386654664, -0.19403907846506763, + 1.072193582335992, 0.4018561884786328, 1.2199426919918257, -0.1339665363838103, -0.723335356475993, + -0.7423722097951817, 0.1267530635051638, -0.3862009836094977, 2.3589998346913674, -0.02431911415854926, + 1.7398835742135796, 1.9521568967386167, 0.37161947662605876, -0.9519304754046578, 1.4093481308861078, + 2.225223153552087, 0.3022941041736126, 1.8498036316384043, 2.111880443036447, 2.0121621002809245, + 1.747958383773942, 1.5329771758782622, 0.5335264867497093, 0.581600757214944, 1.1965173940906473, + 1.274774506412578, 0.3946001045434654, 0.45440428117495435, 2.1987657555362023, 0.8570404560681593, + 0.9154628243187267, 0.12467576527384816, 2.2843043333029254, 0.010242756188474478, 1.0749423620809173, + 0.8519128175499796, -0.7471674166974844, -0.4099515244260885, 1.1942142110927378, -0.84093581646562, + 1.4691853527074428, -1.2464663460169465, -0.09068731986811751, -0.4662269519912998, 0.0976669220458457, + 1.8630019890768656, 1.752685464244165, -0.41680467352111705, -0.38086651497555435, 1.5781062220769029, + 2.1592420149994407, 1.79661117286856, 2.383440685368276, 0.8150201156904069, 0.8317397865207655, + 0.38684108244163606, 0.9934524660859555, 0.30591866796061284, 2.885029411874684, 0.03527978957996181, + -0.11955437429436921, 0.3333074773573744, -1.4943495574601777, 2.957928727064292, 1.8151215770523936, + -1.3356352059513, 1.4524455669186858, 0.8522062240274855, 1.7098980910509671, 2.6601876729595935, + 1.1583937668185982, 1.747771471569599, 1.2922153849981268, -0.29287560293945836, 1.1016244014347931, + 0.7371420484085144, 0.9225945753090563, -0.7186465154174793, 1.7055469107616228, 2.490251965478738, + 0.4513770398626108, 1.3220282180419405, 1.3318536689624074, 1.866985022696895, 1.1780356989238632, + 1.9385524236228453, 0.9409940432770417, 2.293428748560082, 0.5633484001943025, 0.5403796231397502, + 0.5647269232136267, -0.35001480630828863, 1.1987405717452526, 0.5401847906099445, 1.481863314646785, + 0.8991336205862112, 1.5116565153867465, 1.291973904100607, 0.9400939678588855, 0.7331459400843344, + 2.322213619351766, -1.2849176382749712, 1.9299490440456237, 0.23124676800359134, 1.2461795741054449, + 0.03995798367183501, 3.6546662364954794, 0.8734744892825432, 0.33959061138227753, 2.6386275851303544, + 2.009568319607715, 1.7455075390113097, 0.060614273204754765, 0.9062388610403692, 1.958661936361118, + 1.1014189592447032, 0.0912744259233812, 0.08001168053374641, -0.6287985171984807, 1.291092812244582, + 0.9801891561246252, 2.75798911333197, 0.350715158445002, 2.1111413470557103, -0.008494506364157495, + 1.5285008753486364, 0.17790549651765397, 1.2487537632445134, 1.7852684150907752, 2.269797461845079, + -0.5351508658441584, 0.9713830442056057, 2.0986206616172254, -0.4262124283239124, 1.189753656915752, + 1.4425212269968215, -0.016134252858927667, -0.23942578363347033, 2.4986644307284607, 2.2143464307680896, + 1.3149487069230394, -0.4199490289816201, -0.15305610419795324, -0.8645311850786448, 3.047130906299353, + 0.6826588078928438, 2.458961339604746, 1.6663326507036387, 2.632104785858771, 2.5270687595766304, + 1.1565075482614575, 1.7331109607778017, 3.1482032986349204, 1.0149944670579278, 1.1869595916586477, + 0.1604674422165825, 0.8914713906695723, 1.5521967909523975, 0.7498678003378934, 1.6987971021969916, + 1.0419624558120737, 1.7406415172690632, 0.7085470340845715, 1.318598246078236, 2.4507045190594274, + 1.5287196205950446, 1.6453634556320902, 3.567732466566258, 1.3229827513914025, 1.936655615751933, + 1.7368358229883365, 0.20808545316858051, 0.43747862818313055, 0.8682485675368211, 2.009163075564326, + 1.518658787079603, 0.24564656194805112, 1.3167251224371304, -0.3223378419226661, 0.9298039613021007, + 2.0602140681146883, 1.8431778283197322, 1.3482010044071036, 0.37404248706633525, 0.29232500155456065, + 2.6239210737933254, 1.0369292442105913, 1.902603328102535, 2.5387576452274585, 0.653347609132553, + -0.12181078309416815, 1.935453846332126, -0.3782479423368359, 0.18986923608612494, 0.12842495610514504, + 1.1750119298781858, 0.3704398424199754, 1.0837291426204045, -0.12944122986380413, 0.6629724363893394, + 0.2530517876988735, 0.8766962664881424, 1.5520581745839876, 0.0763056701139766, 1.0859890872895461, + 0.26223060032083545, 1.6943312314098193, 2.780117420235435, 2.645036841191493, 0.8868337094821542, + 0.45452972165963, 2.4619620860320826, 0.33691681013793184, 2.2686118836101716, 1.3949911775126076, + 2.4311498313919033, 1.1224087434884498, 2.0256825879323435, 0.7819443942836489, 1.489679918099962, + 0.6325926720677619, 1.2822203145593867, 1.4944062248571939, 0.48742124859761815, 1.4320459696205452, + -0.40607779453841975, 1.7025200757951615, 0.4103322244001608, 1.5745924572586825, 1.8767915748041655, + 1.7743364112150215, 0.5909489248199555, 0.8818636755465233, 2.925838705443318, 2.551562362113197, + 0.8656224686308085, 0.18956888843706154, 1.315516288238658, 2.0716628980275242, 0.312454913330527, + -0.7162750476115645, -0.878833889202943, 0.6947032088727311, 1.6113499604822614, 1.5221335197945036, + -0.27693710623387013, 1.3625873381958498, 1.9219938239534313, 1.115899313148853, -0.20083092421955806, + 1.1172392181523778, 1.6750346489852932, 1.1691036390825618, 1.2029859297289334, 0.9960476064420001, + 1.163147082594017, 1.7216729059442315, 1.7053187204462026, 0.9288524658731798, 2.4130134117445703, + -0.5645287762055669, 0.752559038877406, 1.2524822429584448, 0.9518237340458072, 0.987778178364873, + 1.8370966298464766, 0.3380716077549818, 0.28918275514468506, 0.14217215525970883, -0.9090848279623371, + 0.40634766156726465, 0.45921386931632335, 1.7087209045520104, 1.250530317999317, 1.972209562680899, + 0.6415136042217148, 1.9726881919710766, 2.76829208739649, 0.8039054631656719, 1.8949965483529663, + 0.15378261805266435, 0.21544963667805994, -0.3834139645804886, 1.220774660588252, 2.1797256330399204, + 1.7003382049594125, 2.6467093787686893, 0.1573129905650743, 0.5812419536309282, 1.871112211662461, + 1.6141857208024206, -0.47424685407458633, 1.4605010483426977, 0.8092270115448427, 1.0033274974249866, + -0.0329569488518886, 1.2126655026879285, 1.9276188068986975, 0.7087152200707381, 0.9676340522090375, + 2.4117174500433736, -1.8192499505180293, 1.9932662362621696, 2.163725990682916, 1.453422035663289, + 1.3016012258973018, -0.26651624368846893, 0.366082724493473, 0.7790593376930415, -0.7927095585909734, + 1.8035494381226522, 2.069603923438474, -0.11025020585695855, 0.6254300916941604, 2.256575926355185, + -0.7398783338445107, 0.77744927762638, -0.7158446209448697, -1.0640784039569477, 2.590378986580267, + 2.6416041441499845, 0.7237923374379682, 0.2625840199438514, 2.1497788896908854, 3.170980500671196, + 3.093586996474421, 1.5878412496193177, -1.2717915858558206, 0.7625213487504157, 0.9869353287087176, + 0.7313620474158253, -0.6227714837174114, 1.6063421548427443, 2.3232730862602855, 0.2801983335706967, + 1.5432073434511926, 2.9271386928383176, 0.7603155940661452, 0.6608046350362249, -0.3899995031269252, + 1.2051909467337723, 2.2389001588788884, 0.6734978451462055, 1.2778467500302069, -0.6385455229392984, + 1.1012743861156717, 1.3843929241321444, 1.3285532977853243, 0.8059677726118946, 1.6472880062872002, + 0.5378007664373662, 1.6249581282054781, 1.9966302621321874, 1.360911366339469, 2.496942387812524, + 1.8095366679744727, 1.6995328439388646, 2.144056374409378, 1.84739190122552, 0.413438272515795, + 1.5420480599317428, 2.1829213108801695, 0.6972059619567923, 1.5101983093418478, -0.5966939817503196, + 2.209659821068029, 2.459681316219518, 0.2400013663115046, 0.31681183129057267, 2.709704096824602, + 1.8838926151069417, 0.8279148249788777, 2.7334217378298837, 0.9364157034371372, -1.1898475176979861, + 1.3389140855337702, 1.6284174618016267, 0.687648779097825, -0.3839301101516175, 1.9467908576890625, + 1.247864970102519, -1.7875246408574879, -0.47883653291701567, -0.859685789177576, 1.3770605385271022, + 0.4553439962208815, 1.3412677353767832, 2.109323942959153, 2.1364741062048487, 0.04376501299222957, + 0.9848951379518947, 1.742255746699906, -0.32646085442832495, -0.7969664561561718, -0.0071865050205361936, + -0.265910025841531, 0.4787527972829333, 1.761309426077608, 0.6030658905178332, 1.0595016704078868, + 2.0657775368579596, 2.7935119298810367, 0.42508029781004975, 1.1232277021222228, -0.5429690080865577, + 1.1492073021595637, 0.5148126776490796, 1.663595090677539, 1.162378928463761, 1.777697918065749, + -0.38503682365552394, 1.4044113209655869, 0.4936370242935475, 2.8585799694365104, 1.222035092225946, + 0.5361225813621725, 2.5564604264491617, -0.6788802948010191, 0.691920665723789, -0.5033230665192567, + 1.1463816085018617, 1.4665678739083416, 2.0561290961956233, 2.437979302184922, 0.8907419398415305 ], - "fillcolor": "rgba(255, 153, 51, 0.3)" + "marker": { + "line": { + "color": "#4D5663", + "width": 1.3 + }, + "color": "rgba(255, 153, 51, 1.0)" + }, + "opacity": 0.8, + "histfunc": "count", + "histnorm": "", + "orientation": "v" }, { - "fill": "tonexty", - "line": { - "color": "rgba(55, 128, 191, 1.0)", - "width": "1.3" - }, - "mode": "lines", + "uid": "0da57950-be2f-49b6-a792-f5f8d19f98c8", "name": "b", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392, - 1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878 + "type": "histogram", + "x": [ + 0.24717017471150998, 0.6508904445322543, -0.8150211824679685, 0.15253966266018137, -1.822991097914981, + -1.2652443361175678, -0.6606912065389405, 1.6348593909273372, 0.7238370107613543, 1.7516432353985738, + -0.23163828338164527, -0.8450825428744152, -0.5844768325120463, 0.8163479149135711, -0.9043241120474963, + -1.033241804482091, -1.1508081459397703, 0.2500849369342386, -1.0722254424042883, -0.3818758815115354, + -0.09184267628308106, -0.8310239788407002, 0.30918710925621823, -0.08817673873215534, -0.194201628422228, + 0.4498720118714331, 0.718739531277941, -1.5212579707304652, 1.2111098007931569, 1.6827079878819076, + -0.32600413461486905, 1.076060629024589, -0.16558954069343906, -0.10463177421592845, 0.5320982232387549, + -0.4057279103394287, -0.5454365137328842, 0.12105913342208229, 0.17312318436829355, 0.3581774505643061, + 1.4053985524637818, 0.7385779072129972, 0.1728993325302504, -0.9642900730742399, -1.95019753096222, + 0.7953017083783489, -1.3267399891454332, 0.16440059785827735, -0.1765065377819852, 0.24884985573797141, + 1.1168155478437398, 0.20189052654469644, 0.13920010611734465, 0.3632414028572216, -0.1860372376109264, + 0.13741016106913026, 1.155795006020221, -0.15205090348919997, 1.482046795462377, -0.21543274684447528, + -0.49368253233804393, -2.833554199866558, -0.8954977369315434, 1.0982651974761002, -0.601677749927168, + -0.626052278975063, 0.8176143112512172, 1.022510974544082, -0.9112534501862416, 1.317749380832231, + -1.935342426198395, 1.0853897247144597, 1.1365568442970788, -0.3371625685944363, 1.3248619549494398, + -0.21792679342945975, -1.3872271391403075, 2.060293685116359, -1.2966809561606407, 1.3389934684176532, + 0.3061307598318823, -1.5477646780903176, -0.7687697828301248, 0.9461943137621243, -1.2552954777182082, + -1.0324634543226863, 1.7469672065096085, -1.922118988337992, 0.813290245474606, -1.581210140425815, + -1.85270906655475, -1.447052388789858, 0.8647306728957707, -1.7074942767636454, 0.09072455997669249, + -0.1434018710397995, -1.3508724761125548, 0.43884416771151313, -0.3923080679859707, -0.484863957186313, + 2.0313414148272684, -1.0770197870466236, 0.5501630453529763, -0.5769021109992696, 0.8723327961817133, + -0.15793816313844766, 0.611569718103245, -0.9279203551660642, 0.8868555305979685, -1.2863958884876252, + -0.9169961989887135, -0.4788021497309598, 0.06737049507226364, 0.06377790502949275, -2.120926699452253, + -0.5706935250597426, -1.4794975393529384, 0.5484514478553956, -1.1289598941330543, -0.46930103800834316, + 0.34415766628755223, 1.0127642384890394, -0.5860617803207959, -0.004361076960960266, -1.4624084412873102, + -1.4876648199262983, 0.0002434034845286234, 0.31404839889437397, -2.853581563401052, -0.6905443983672489, + -1.267505172562291, -0.9743404754720454, 0.5738896150082914, 0.2892135479255045, 0.38574482865232146, + -0.7455721437008832, -1.2387680016704763, -0.10014471002138516, -0.10122547359839233, 0.8381584472113365, + 1.4425872995117839, -0.6474828269639481, 0.42990651953898473, 0.4861226476675611, -0.18365068368518048, + 1.4429115324114752, -1.0077850587603994, 2.170800719986625, -0.7598808679056714, -0.7723883605044803, + 0.6028150682057919, -0.8752896219034508, -0.16019006096227134, -0.5235998887306694, 1.3225687015352434, + -1.0421450720209056, -0.0041099689737157, -1.3744014131425226, 0.684666361539239, 0.4987951683069051, + 0.6476768240541817, 0.1660948804877157, 0.026845896625398567, 0.6486776400327656, 1.589740672914597, + -0.13585507853736203, -0.41944005387169464, 1.9285913498078224, -0.1716076863148993, -0.8830322685894074, + 0.989328997079004, 0.15014887363927917, 2.1073856112319573, -0.09336556072943948, 0.8251907761938161, + 0.03554048954198306, -0.8728308321492795, -0.49617580601481187, -0.2885116765790593, -1.0777480601650007, + 0.49890244290587826, 1.7647872157816171, 0.167148057085774, 0.2230597536567459, 0.6471052411259425, + 1.2511936724955517, -0.47823538558215956, 0.6313427903382485, -0.47266890661496663, -0.922983516646936, + -0.0848870934057788, 0.21357394132950927, 1.1838943792994803, -0.056489154246596535, -1.5350885762084687, + 0.2153807864791426, 1.049613321403998, 0.7913592687180824, 1.0616499979863872, -0.9325579449300242, + -1.6613732101495557, -1.465723136161939, 0.5211126127597852, -1.009383057170543, 1.571047158972572, + -0.7802107101237583, -1.2065713502039144, -0.5754557994153494, 0.18604311654793398, 0.10009144534385224, + 1.6596790297623762, -1.5034877366780703, 0.6024263047885633, 1.845632368638024, 1.3426911554615766, + 1.4144657904497604, -0.4685345744721685, 1.1665703498240583, 0.9466358336326075, 0.23432484112040114, + 2.1896805672517776, 0.10329305161971308, -0.8669993787780316, -0.10122454183853348, -0.3852780039239969, + -0.06537064291267099, 1.7854993711278595, 1.4746600355221693, 0.8180767106832223, 0.03171178302883711, + -0.7311915691326462, -0.5294530336276179, 1.1616967257501902, 1.3235646225716677, 0.8083954782361215, + 0.9346961517158318, -0.15994395076848172, -0.5832060303528012, 1.0861622430620157, -1.9117988696496828, + -0.9541754048854387, 0.5623809356714187, 0.878482328566476, -0.7273251347315781, 0.11780047531825437, + -0.056290707745546203, -0.7118286134963978, 1.8079048773915192, -0.3030024456040709, 0.5113279649836252, + -0.17662124581595143, 0.413556705132392, 0.2508471978756103, -0.957586821591974, -0.5606625261381489, + -1.7969542661952589, -0.17951607976099337, 0.3828429015202436, 1.4006774417602552, 1.2214910092762616, + -0.07276900338292434, 0.6349045670811495, 0.5815165198562923, -1.7149528054623837, -0.4740962394511683, + -0.7869466942867669, -1.4010205601918595, 0.009623074214509732, 0.38528282304379974, 0.27048459355362375, + 0.34456132269340256, 1.0992594911564437, -1.5819614025235795, -0.19966981632576566, 1.1017660413550918, + 1.3529014479021524, 0.5010051267668827, 0.10706917722042782, 1.290128530495684, -1.0145662484581144, + 0.027945456045077168, 0.374354024688417, 1.36879447977263, 0.6216519545839533, -1.0164986094612556, + 0.5659414903893583, 0.9468000823530679, -1.3751379600000448, 0.27224378790257314, 0.7909135762743138, + 0.3327477517188392, -1.266453506806076, 1.5306542311392397, 0.5529182019404896, -0.12734077013114173, + 0.021316009434535307, 0.3683427914836353, -1.0898681944035924, -0.574585420322725, -0.6052695803083427, + 0.14504953500969345, -0.7188118249593387, -0.7424240665468679, 0.07242375779749721, -0.25386890138486606, + 0.5303633323977174, -0.07748202462848244, 1.436851157176041, 1.27477866692964, 1.2034959772374842, + -0.13335536472079937, -0.5709022212004916, 0.9111074446467027, -0.25036530174911453, 0.8433004970647272, + 0.40176998169367084, 0.18884023993105017, 1.8214637574874237, 0.48782388243322516, 1.7750840328750188, + 0.9821456607527446, 0.12490795768041613, -0.5922156078661274, 1.112236853138011, -1.2611554870130486, + -0.2408518516301633, 1.9764903787197086, 0.12675330788317268, 1.9181579072470047, -0.43061356249680777, + -1.1351819355135224, 1.5883510729873451, 1.1459064225143687, -0.9927263683215908, -0.9680013931641662, + 0.11744498097610455, 0.9440814831114352, 0.10369974663800582, 0.22984112616533564, 0.009571988151109828, + -0.09493621270205357, -1.8428048487116817, 0.5294868676175625, 0.01199144841454447, 0.7315376715494402, + 0.47290043222271255, -1.4732838724027217, -1.0110158634871256, 0.5963799590116874, 1.0281078344249033, + 0.544800876348311, -0.3011259232952372, 0.8310387360892563, 0.16305353154352406, 0.48985943424754474, + -0.5903853297373168, 0.4197752541338072, -0.16580714159020726, 0.22881739066986675, 2.0958268094894357, + -1.4389751605502508, -0.1688582882164341, 1.1726387303468975, 1.421359540272095, -2.6612047864446318, + -0.7006199750885447, 1.2061269344417644, 0.3417316124533405, 0.9434594039832892, 0.9299960890943318, + 0.5120228371947173, 0.003242333604216274, 1.6096553180846633, -0.43193376079241225, -1.1237367068747013, + -0.5658877722589758, -0.11588885791734829, 1.5953979989982485, -1.4436032149241773, -0.192029476388627, + 0.5572940794074174, -0.24464074589593135, -0.16721639311299086, -1.0894508749054412, -2.277109291568765, + 0.21380676022263861, -0.6617061559688207, 0.7089747347833567, 0.4050110908077288, -1.3968805210461337, + -0.36187802078563563, -0.5771509850368625, -1.257801154004516, -0.4290707334815261, -0.5198215120663554, + -0.29836464857565254, 0.7401824470342562, -0.4128089214851227, -0.20348139076619104, -1.0263562362711167, + 0.31817308051178456, 1.8579841183697818, 0.5148895042352157, -0.4353551383900013, 0.765813311852205, + 0.6035561820699586, -0.4739478192950353, -0.7692475901310781, -0.038794243644712054, -0.8025040129970537, + 0.039250591991395134, 0.2190634141165833, -0.3398892537374875, -1.2464726884418627, 2.486124957792264, + -0.14399426229065013, -1.9117134120604264, -0.3704382126954436, -1.3714784413211725, 0.19381924458319205, + -0.3380736940358205, -0.7247437191604229, 0.9298117345423975, -0.6050292369282486, -0.13167537549610994, + 1.053645346954542, -0.08972777118469959, -0.726209040728487, -0.19995524124132513, -1.2674274486330859, + -0.3424588271018304, 0.11691070834983977, 0.24944318150448466, 0.05013778775408014, -0.6396352741658524, + -1.5708438000260556, 0.31794465675939165, -0.7550462890650952, 0.3760299864283936, -0.5407500111955571, + 1.3304268330404363, 1.1091191495240815, -1.145079890749212, 1.6530064842355414, 0.1172824123999301, + 0.4966423981925106, -1.2856596729013319, 0.23234458652706752, -0.859951746906971, -0.7875522340854051, + -0.7316618087169465, -0.731120834276107, 0.9764308120953917, 0.8333216830949784, -1.345679402988789, + -0.46636340047136315, -0.7496877749316126, 0.592328275509295, -0.11163403742846677, -1.138744102875518, + 0.16070735045559814, 1.7010245485213378, -1.8672262338066044, 0.1357666765020308, 1.8107695972991298, + -0.6958566157110365, -0.8969990166705052, 0.6588103360003852, -0.4630638419265091, 0.10266863144821196, + 2.018800506760945, -0.39095602576608335, 0.7528888210425931, -0.34198459157504163, -1.350166356032729, + -0.9891360841491725, 0.36517717152325074, 1.0596948843261915, -0.6589593620699395, -0.10051660288942761, + 1.0465286833321448, 0.2832307866183443, 2.4806930703085266, 0.6595275920874967, 0.4014493192281944, + -1.9657309794815039, -0.3717497367109962, -0.00997699141422927, -0.8661256875499859, -2.9001789797938127, + 0.314373489455665, -0.5710092633464785, -1.1985748367275346, 2.2627958814893976, 0.05369546410544602, + 2.2196398580700714, -0.8215159023184033, -1.3170401112033578, -0.2574683969623841, 0.09596626931752447, + -1.1460975323611489, -0.611734580349255, 0.18344931286665336, 0.9873804690275889, -1.1688551298893686, + 0.25938005748776594, 1.4348101350453586, 2.134553755141447, -0.08655125976730663, -0.13233226095169592, + 0.04007552959900407, -1.619062232172446, -0.42322307759132366, 0.7311516980445337, -0.5728539579185726, + -0.8086304917847332, -0.2969440740512066, -1.1060667929650587, 0.730189809378188, 1.0331160110886253, + -0.5482482561159367, -1.6463076806578456, -0.5780429512038785, -0.4148861268298393, 0.6088591382176125, + 0.02837181583750673, 0.8265082449241612, -1.2949355087170702, -0.07321425824798002, 0.643310938237264, + -1.0881351849148093, -0.9037768153070401, -1.055969098661931, -0.5094049180787917, -0.5297798078576355, + 1.0826817387022085, -0.7265213117688585, -0.9471970947871516, 0.09584523855578374, 1.2817823279838951, + 0.933949046732906, -1.2416929044399099, 0.5158698586241993, -0.3391268959927017, 0.07590027719466, + -0.6536215313854338, 0.12613147560600377, -1.2931289988334955, 1.2059267399255136, 0.8221806107128893, + -0.14975612615137332, -1.1357786018438094, 1.1078739799984285, 1.4519656826825322, 0.21425262242229323, + -0.17297494959681592, -0.4125596663091237, -0.43903287968682686, 0.285420305156604, 1.0289819681284869, + 1.30304953472453, 0.6100432183522858, 0.528406941280846, 0.6493695934354875, 0.035431712313638106, + -0.34644690998141164, -0.796504506738752, -0.11828378524729105, -0.16450565452078367, 0.4965399732181898, + 1.8127114994468416, 0.5618612464375041, 0.38908605366841514, 0.9672246798034804, 1.2054945080332318, + -0.7825581755187514, 0.46530849788959566, -0.4653354995343681, -1.2497509312557395, 0.5933954386048551, + 0.9714888969929732, -1.231176922844112, 1.2985644430169883, 0.23332698070444188, -0.9189603270426907, + -0.15901819960804706, -0.04088683592629575, -0.3622566203984889, 1.4034605863680416, -0.9799196744438996, + -1.0082592208707042, 1.5889726313663017, 1.3879867130445946, -0.8651531953942443, 0.8325283251324677, + 0.40283478392364, 0.566734851550195, 1.2354029177554389, 1.9401102987941288, 0.3304164459556951, + -0.44682485854050935, -0.8828573314953989, 0.37309537154182004, 0.6966264193565658, -2.1531470678728075, + 0.5822121309083735, -1.1864975789724992, -0.3467790135902433, 0.06192610280088083, -0.9593013558031604, + 2.314555685603726, -1.5363546389107323, 1.6613624488641603, 0.3068925034822794, 1.0855460271134578, + 2.0362105454916377, -1.954124607535517, 1.8459423197107276, 0.007419854702835407, 0.419613751407409, + -0.8700966275550566, 0.5931832214354316, -1.9814093272532223, -0.689816522318143, 0.7052365581383292, + -1.524097325272836, 0.362738165849644, -1.6027372930389894, -0.575060574549145, -1.0768938817874592, + 1.1122175035586142, -1.1798486870355185, 1.9446179622977855, 1.0862699095645545, -1.4227326226253796, + 0.3723787334721068, -0.7428992713493225, 0.7864313232914981, 2.1817410605724974, -1.1526622137685807, + 0.9943929143067622, 0.6540577793677304, 1.2088354265370456, -0.10770763112738733, -0.5762716050306712, + -0.006312645070578343, -0.6512835043654928, -0.3434385872483015, -0.8047417776910505, -0.8011265980368593, + 0.12057134681295963, -0.1731512640809081, -0.7558497182534891, -0.7045123958339868, -0.2632890683609227, + -0.6752420038236423, -0.6797472545975527, -1.708221079984937, 2.269136570189591, 0.24620846826150533, + -0.0047837274506687, 1.606223647617759, -0.8780964391996585, 1.332735198583268, -0.2048959533958293, + 0.934628171878223, -0.27532977809955067, -0.27455588132982456, -0.21639610710487775, 0.5345512255765458, + 0.9862317869761077, -2.3152953069739546, 0.09355389670471666, -0.43204155084867457, 0.6254203578331745, + -1.4905133828626114, -1.3202404641510304, -0.6516063865631411, 0.7661154967709796, 0.4406880977769576, + -1.0943669801255602, -1.8572301032540994, -0.9692418467996528, 0.5245692293175974, -0.7497058753366137, + 0.9021668708994779, 0.3007171019335282, -0.6342591518432482, -0.2792441835230398, -0.10565009854168868, + 0.08853325137650421, 0.14589445133655635, -1.053227239214965, 1.1507556676103885, -0.7765478928939493, + -0.23488985672206933, -1.35254486184858, 2.002228471684712, 1.0240753479576528, -0.40139546150768485, + 0.7272086104915569, 0.3162000334830568, -0.10206748103875186, -0.0759493104055277, -1.351981985062227, + -0.37386708908599814, 0.41468820700293596, 1.1233372568681472, 0.9263527199129673, 1.4578155418475698, + -0.3007865535002782, -0.3600881776880989, 0.3226539586267199, 1.1098550947492214, 1.1902688892659261, + -1.046805648066965, -0.41310650501429486, 0.8354658073631973, 0.8009402332786113, -2.092424014571576, + 0.6162429136025703, -0.4070185673243271, 0.08738651084358477, -0.3917986470825591, 0.2722375030922986, + -0.678773385712444, -0.20645698047130176, -2.2156600429107574, -0.5778332890010393, -1.2842358484380072, + 0.32257953783010224, -2.432858313204693, -0.21423785852399502, 0.09234088836669363, 1.8723459353954737, + 0.3116027334442146, 0.5725449534928352, -1.0103789833472068, 0.5425900942297627, -0.6087760672370536, + 0.35887541633607845, -0.8340110899194649, -1.2458907118620843, 1.7117345997353934, -0.21171419703849706, + -0.35171224122255734, -0.14027885465667442, -0.49496650372210144, -0.8765230988961866, -0.527273221722177, + -0.17221423474549502, -1.327694105838922, -2.63950303958468, 1.5825653543957154, -0.14288640047785348, + -0.557611113063478, 0.06725764129452667, -1.6536371632721105, -0.19546948004173959, 0.19232399992043536, + 0.7318406525044582, -1.3514857758605863, 1.2272059704043077, -0.24872731316036867, 0.2521799247909455, + -0.6480325392596458, 0.6036292834079413, 0.5022129251488993, 0.14136376883128368, -0.7670223176536054, + -1.4214881053797948, -1.9414270362384096, 0.08145049873345955, -0.806035657676726, 0.9608213954093567, + -0.9888633886037648, 2.2112268803714366, 0.5784051206947785, -1.295227278104692, -0.7406381599007316, + 1.7308546647336565, 0.016725605731691903, -0.9052732161641754, -0.4789529787584098, -0.15432755338701978, + -0.04898802662344806, -0.5513603394650693, -0.26377536441039356, -1.2509975972995118, -0.5849060036538883, + -0.15927667307001395, -0.5436270419872595, 0.679685435138932, -0.8208598900271087, 1.3837192377620806, + 0.9879899569172869, 0.2799267850370644, 0.7059195073750612, 0.993631776168359, -0.4845235515263151, + 0.6749006865873656, -0.17871734605336176, 0.8873958986148749, -0.594433358812157, 1.604346571383979, + 0.12679610429203095, 0.8603049362023704, -0.10074065627060232, 1.5396010150001553, 0.6262501635567194, + 0.7191613741728022, 1.9244064607744034, -0.6512029373916618, -0.5935549526627856, 0.7632944585929242, + -1.0442292098266002, 1.9599701672744536, 0.375098066715715, -0.11590637875839228, -2.3451953718123777, + 0.6760722165505332, 0.3503901593514392, -0.3445163409530079, -0.08514400254261564, 0.6121936626258342, + -2.4693877739428465, 0.2448164872319753, -1.1042772536120682, 1.3162595585525276, -0.8776037228248692, + 0.9362227162529728, 0.56223899681111, -1.710417520124907, -0.548470389690448, 0.7321328252784692, + 1.4294325751184078, -0.2995398735486935, -0.21351370576547218, 2.602231485978111, 0.4589018617695131, + 0.36898045304134924, 0.2912043023683997, 0.4010253554844599, 0.80547924759533, 1.8472949776621252, + -0.7092753091139703, 0.27165352791123987, -1.1287400305084936, 0.19717804833192729, -1.3564106169358068, + -1.7894240524437912, -1.643775986040349, 0.786385810356323, 1.4727014535795917, 1.7161717759563184, + 0.29577036647413113, -0.5907536545009835, 1.4853031565565995, -0.6572252651585306, 1.734761724237341, + 0.11648552668593488, -0.5341496084509058, -0.2702734086163261, -0.8589555538893968, -0.3316241849295669, + 0.7730434318388038, -0.9021650524512336, -2.047073717684312, -0.613282181087793, 0.10850979779007049, + 0.0021574667286730197, 1.0248849795219361, 0.20052591910291115, 0.255049300773108, -1.0355101690802482, + -1.5067399763475955, -0.7324291766906069, -0.6615400833686695, 1.3714047199068402, -0.544224802566983, + -0.3888391511490841, -0.5701860395684584, -1.0768981124832804, 0.17783738618734676, 0.8684015805657804, + -0.6288391364145552, -0.1809346616394548, 0.47893376870625703, -0.22645317633115575, -0.6232234184570332, + 0.7190848473201449, -1.383822708846083, 0.6760106198175666, 0.2547795395493637, -0.4592728609104206, + -1.0720063809749247, -0.5097336442488316, 0.2210945722858165, 0.0054940755442051915, -0.2682202416730527, + 0.8832895236943469, 0.22035015534807104, -0.28323135681321404, 0.0596942381726312, 0.2951001441099985, + 1.4294566636751351, -1.8415718234294567, -0.4287767535621176, 0.02235146702729841, -0.19623394005718553, + 0.348486936660908, -0.45028713499693546, 0.5109081477837931, 0.80404587857595, -0.9576612954106148, + -0.49846557170623607, -0.5282676532693787, -0.9023668605060903, 0.718948342727176, -0.19721998877492158, + -0.3493854959489624, -0.6015698899368381, -1.25739592661238, 0.4615703609944283, -1.522793551670885, + 0.835813231026569, -0.9632684667531055, 0.5949002940876471, 0.6801241316046363, 0.16239126239994003, + 1.7871127739698363, -0.11179200301594365, -0.11479877273726007, -0.017768269564701518, -0.04595864622714386, + 0.03186982221174247, -0.8924472246573419, 0.3773470645824399, 0.9343193851877845, 0.17678950535993326, + -0.30349579978993296, -2.2195811995137253, -0.7605603587531623, 1.4519878601632827, -0.21168645510474787, + -1.3446956935225252, -0.46883579885368554, -0.5480783626043464, -0.03826750777339118, 0.9230210091643275, + -0.8117667649758827, 0.032921144936808824, -0.14694781434160942, 0.2732522186016428, -0.28307590066421495, + -0.44035510547379314, 0.19961818762280978, 0.7607227206679584, -0.006421047821733644, 1.083672671799983, + 1.5248123800083784, 0.3631357175074549, -0.7881724782716621, -0.021303921700341504, 0.3656975257174558, + -1.7438786191751867, 0.47970946679448107, 0.06584509630219254, 0.46921648575314345, 1.487324405065218, + 0.3054584986671542, -0.27013805573980154, 0.0834218511987659, 1.7877651910559618, -1.2286892517506403, + 0.32603468731673657, 0.019401575698656824, 1.9968485902846984, 0.15967674516314148, 0.7436323535351307, + -2.8799070515793095, -1.1338904523418378, -1.100245904375071, -0.0922766913171747, 0.8567663128968322, + -1.032886450676613, 1.3115985566628139, 1.1525099783356643, -0.11952472894818086, 1.2133481193955682, + -1.6139892679614278, 0.5593529445952521, 0.03763293886276376, 0.2543879239408883, 1.8960846406593528, + -0.36933998733459217, 0.030822422117507603, -0.2169001686850376, 1.216550357293351, -1.2454685329663429 ], - "fillcolor": "rgba(55, 128, 191, 0.3)" + "marker": { + "line": { + "color": "#4D5663", + "width": 1.3 + }, + "color": "rgba(55, 128, 191, 1.0)" + }, + "opacity": 0.8, + "histfunc": "count", + "histnorm": "", + "orientation": "v" }, { - "fill": "tonexty", - "line": { - "color": "rgba(50, 171, 96, 1.0)", - "width": "1.3" - }, - "mode": "lines", + "uid": "bca37da1-d2b1-4232-852f-692208ab0ddc", "name": "c", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358, - 1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171 + "type": "histogram", + "x": [ + -1.3721691025663127, -0.055559399376507335, -1.5268281942267183, -2.3068542674634456, -1.634184001814117, + -0.3846139031707887, -1.3079057664033003, -1.8023900909842059, -0.39685654971775064, -0.9700764293361207, + -3.2252225103122267, -1.7541857307474733, 0.0726472328611778, -1.5283169557075813, -1.3593556129862843, + 1.5558842316123753, 1.5610253445169122, 0.09028942809703233, 0.28093976501896134, -0.9182817541696389, + -1.9474806097659059, -2.0693260145236847, -0.45087692755871533, -1.8396030238223577, -2.1821234736201496, + -1.7956456323308654, -0.8745919002311255, -1.4732294253636655, -1.5737199778097795, -2.0906249949790143, + 1.0783802824223598, -0.7678270898396788, -1.0946846976537616, -1.046599528798077, -0.8258573773450975, + -1.5460788519494995, -2.1630006294431947, -1.388458285688274, 0.09949416034153025, -0.26407962471920354, + -2.0116724321714665, -1.1161186530636875, -1.0972262957231433, -0.8357971082590953, -2.018948703126203, + -0.8851490574451603, -2.0200714198352854, -2.3139194145001594, -1.4757584101325891, 0.1952031661446023, + -0.5351517186507875, -1.66560485060405, -1.3159939110426362, 0.2055271353320851, -1.3286683182712768, + -0.6553833950543407, -1.8348198357522545, -1.1236037854819074, -2.037333587620921, -1.5231036110152445, + 0.0015785003944064346, 0.3118845183872452, -1.3213434209817232, -2.59313517540774, -0.11810410239181168, + 0.2921985012132666, -0.38043971158559675, -1.468381118608244, -0.16369778566586812, -1.6336221818136065, + -0.7572978365912203, 0.6641565846049517, -1.220252118627534, -0.8154670127389112, -0.0897976181988589, + -1.5880733281432204, -1.2509923023222245, -0.4192922526791726, -2.3225468986520568, -2.0253298993423408, + -0.4290532305770398, -1.1977392221576755, -1.3838501545669573, -2.6238531018805245, -1.2885072454796083, + -1.916117519861287, 0.49751232615024654, 0.5071573582737465, -0.39751362691791936, -1.4508245759564813, + -1.646509459850566, -0.3383917987017795, -2.5107896735130497, 0.03600842053269737, -0.3983685165767131, + -0.28142941855349723, 0.06219032812404279, 0.3832282128653597, 0.38774306844429707, -0.401165065304515, + -1.8961349155045868, -1.1281485419777995, -1.2204537732694851, 0.016857943429609668, -0.5343481749103374, + -0.6957789100928999, -1.4779097361903588, -0.10242592465829503, -1.178035586259421, -1.1940105002218764, + -0.9947212873423706, -1.3040549520348677, -0.4051649584181839, -0.7765046829126945, -0.34435224450413926, + 0.04441960267815537, -0.6952306059471409, -1.058042298770127, -0.08635706637291973, -2.832741379159513, + -1.8998952880491287, -0.9738688010384593, -1.3637478522094972, -1.9355410528538726, -2.774762751231963, + -2.0315828421390094, -2.980112601746968, -1.9575110225639811, -2.9096467039164926, 0.47809106569539916, + -1.661977503856854, -0.8961885571663387, -1.9134037122836427, -0.23193651358388878, 0.08165709423300394, + -2.482870860074078, -1.96828466998516, -1.5322032992246175, -1.6689067529433346, -1.3351481174823425, + -0.8516115688396445, -0.7339995760204281, -1.9430537021848133, -0.4328442506196758, 0.10256393100866767, + -1.3241552620453252, -2.0045125417246696, -1.3779453786538645, -0.6695286356597974, -0.17058636859790466, + -1.2765829416959678, -1.5535631513543708, -2.7285348332885286, -0.6299559011464553, -1.8902328466232938, + -0.9276768809042669, -1.6497709133600353, -1.0618062450466585, -1.0066034534580057, -0.8494835499746591, + -2.009675484436862, -0.8134004936825887, -1.484546835466223, -0.15535055275656773, -1.4880777397513252, + -0.6461589999346729, -2.2025767797108995, -0.85119023698206, -1.475635325571694, 0.054604081680369676, + -0.785465646283342, -2.482787454019869, -0.16493764400379196, -0.4364734417180497, -1.7278626535709787, + -0.4262864074998003, -2.791637498043028, -1.8032708606695502, -3.692849409869771, 1.4197074620595336, + -0.416428757909329, -2.1607999385316132, 0.9542191140069787, -0.5927848884050715, -0.8985398212812252, + -1.3547420976264428, -1.7879617356981379, -1.4779542665269938, 0.01894480910055263, -2.40279186297451, + -2.155388436073219, -2.123907609669101, -0.7079854235311156, -0.17629501948813497, -1.0135748660632262, + -1.4754803667629681, 2.020177127299421, 0.8013292388780942, -2.833370047254127, -0.0978191198585373, + -0.3694686458085179, 0.6401525353818942, -2.0046850507544325, -0.38905555381567836, 0.4758070341542575, + -0.8107549565355064, -1.3251314805090533, -0.6784912523451041, -0.08319184234925925, 0.12721485100954188, + -1.9900204409846958, -0.7814909494567001, -1.4705279900528296, -0.803250692851796, -1.130794997965504, + 0.25230694048103874, 0.5199168196536541, -1.9786653648387027, -1.2211384258135853, -1.3517419103173696, + -3.4512978463909665, -1.9360717294758634, 0.5963912150553532, -1.1651298420764546, -0.2677546976333205, + -0.990895840864774, -2.1772940505953535, -1.5589533017848485, -0.3066763105649537, -1.8982997283228218, + -1.253720565121647, 0.5629754017025879, -1.1040122218251722, -1.9368546708049457, -1.3242008335482496, + -2.7062714121523195, -2.1391981970095966, -2.218253186488092, 1.1410270066999946, -2.678909237004068, + -2.1034224312463294, -0.09001599702788532, -1.3861573050466973, 0.4309077992086905, -1.7676825412793904, + -0.0797806410671209, -0.8090051979442361, -0.7191278109578347, -0.9238956958829518, -1.8708997613343679, + 0.46095881707891295, -1.4536735037571336, -2.445594948796697, -0.2855854013850947, -0.03849810471243953, + -1.2183907927612219, -1.995087499009896, -0.9176306629521732, -1.2638394287812242, 0.077172621282108, + 0.04861488534812297, -0.30524012004496914, -1.8949252726263692, 0.023717843789584858, -2.5801121114537313, + -2.283902994947505, -0.46450062592334085, -2.1998680928956937, -1.2843448610035528, -1.126315694880292, + -2.432925891698704, -0.367152071466476, -2.164981253605186, -0.5334011550101527, -2.786447010560285, + -1.099818527279702, -2.7516911620520363, -0.9539562331918541, -1.3224389623514698, -2.619116218456747, + -1.7191710355640561, -3.777617047477266, -2.1935428708556928, -1.699724575290813, 0.6929416544115212, + -1.3539595899257533, -1.2529510944317774, -1.8834081647183984, -0.005871959851251662, -2.498168585350884, + -0.6837689553252978, -2.447918564998174, -2.700046089939507, -1.2512548276022328, -1.180103465948875, + -0.6745266138319896, -1.694132877765691, -0.6507546125707508, -1.4418864389567574, -1.449350386945441, + -1.569698037860454, -1.6843242108560887, 1.0044495680644663, -2.5399103605869326, -1.5874435162334335, + -0.7414223377353278, -1.0537593201669275, -1.3890836031486868, -1.326026300142044, -0.7377990409785633, + -1.4979789890154254, -0.22374257362344796, -1.9517507921497392, -1.1347968771877917, 0.22880256288448653, + -1.736615362819471, -0.36169567991921336, 0.29802511349728866, -1.1759317372642917, -1.8317746807202653, + -1.3980910647528513, -0.9679729038438629, -2.188642187037331, -0.6864718785343349, 0.5820529535218586, + -1.3580261254829886, -1.2622040836377058, -1.3557743007571226, -2.908293520800397, -0.3448754298378769, + -1.1526652109415496, -1.5934890521574867, -2.2221100507530887, 0.017479147130040618, -1.3811326387025953, + -1.6943593970638644, -0.9702549626687003, -0.24525292165645185, -0.6608534276160445, -0.9833578758804171, + -1.2945705777471932, -2.36049903048858, -2.2698537032955013, -1.1551419419096713, -1.0552067877268103, + -0.4876668982851452, -0.2035337072525697, -0.9835963509135919, -0.5432875259567532, -0.7914287117149585, + -1.341411946663011, -1.7308073385525318, -1.3962899230417753, -1.2365695711118063, -0.9042643443167073, + -2.1369244455411875, -1.3599935533093839, -0.5058539175626544, -1.670170321009285, -1.0088914079208409, + 0.07018092936523601, -1.0827754716271776, -0.5991804639605015, 0.1401322493708208, -1.6486680062383055, + -1.2750941077857323, -1.6837272833160504, -0.6011266389845524, -0.3274793036409187, 0.029010292968833173, + -1.3882366390349945, -0.5075063169355418, -0.6493350286568689, -0.4477212254195304, -1.8670121692713302, + -0.8031744131053922, 0.10801220946780377, -2.936208371432426, -0.7109240417542275, -1.4298519202740991, + -0.8764647178633191, -0.4640577205233887, -1.033261936513611, -0.953289413008573, 0.061973421504680326, + -0.5954082591620979, -1.042538006941682, 0.03288725198127018, -0.5628770423474097, -0.9772475675650726, + -1.8889861166589759, -0.2360177097593531, -0.4773314455110471, 0.9563051144957551, -1.764236902867438, + -1.4829353170125787, -1.7350241779207698, 0.06947306087263394, -1.259706502557687, -0.24488414667518832, + -1.2940708028028618, -0.9755578244936758, 0.8150477017721629, -1.4611568247532158, -1.060819830085969, + -0.9666059811130792, -1.3075979008188319, -1.219709407688154, -1.0883755083766424, -0.5747772839893712, + -0.8553887283888298, -0.9192036464570015, 0.45548779863308675, 0.7547105979934952, -0.8865365278524578, + -1.8009874773541936, -0.528537610675502, -0.7499910830746261, -3.2986233385129298, -1.2391359644004039, + -0.3632123579613139, -2.5567304481426922, -0.8407543280684374, -1.2006596950428974, -0.3787376576620276, + -1.3246425189618736, -0.2762648141925589, -1.2363144264827277, -1.953620507954525, -0.5961866591447944, + -0.044336279714322524, 0.2415783546852961, -1.777748453186145, -1.739701114993259, -2.5893487997650846, + 0.08700023353879716, -1.37480446462179, -1.5701989818906141, 0.5105608669465533, -0.45226993539550564, + -0.19926961594633918, -0.926726438313498, 0.5777644293004638, -0.33618851935402694, 0.2393873678082148, + -1.1288232153198792, -2.5074426231375213, -1.8002992905892659, -3.4245122964829338, -0.8023044493490923, + -1.1974330984296095, -0.3357462114971166, 0.37817678645694186, -0.49323098037655666, -0.4127996612469408, + -0.6406202086504156, -1.6563557427506468, 0.4633774242852158, -1.2209465185721853, -0.6894423759078302, + -2.929050866151614, -0.48765480823262564, -1.6081625649920623, -0.32260456985236996, -2.6384771645208565, + -2.0290061863629605, -1.4783112585712392, 1.028219393928909, -0.7145735693099435, 0.369307819800063, + -1.7337918460463222, -0.9917950648752052, -0.1540866375897113, -3.2939616468356467, -1.079915844557645, + -1.828103260028421, -1.980118847879334, -0.8748554333352151, -1.4011336786661035, -2.242446179173559, + -0.2846074217252871, 0.8440029105915643, -1.0107895257595352, 0.5653629014717787, -0.3849189700300143, + -2.212766042054662, -2.1577685361600563, -1.4020552230953316, -0.5575923172826729, 0.46273146588096603, + -1.2885826022940081, -2.073319253557398, -2.241273594370717, -0.3965872673430061, 0.25085868757376506, + -1.1191735990893479, -0.2965795072377787, 0.24324287988868498, -0.31915479947497805, -0.8258205128987507, + -0.5625764935288391, -0.4461605149661202, 0.5308667799414253, -0.8199261681060447, -1.5271962967573556, + -0.731812220324271, -2.78142405454335, -0.8386172591713924, -1.1496360248484385, -4.077972955543203, + -0.85919072067522, -1.232528151481586, -0.3568493518702913, -1.2362516958942082, 0.9107837045928298, + -3.5750955576174137, -0.4732835493633839, -0.6168539018244226, -0.15120174034641454, -0.6449541101808536, + -1.3164860680183814, 0.5101763909427215, -1.1812577692090085, 0.012353526916064839, -1.0110424827656033, + -0.8184183183112443, -1.563550553352174, -1.3282525577448678, -0.06361632893693991, -2.46315916567206, + -1.312362512719348, -0.46295665246596773, -1.8475307047880378, -1.468202945955817, -0.41409273383648804, + -1.6250863040687822, -0.5498583768028471, -2.6738261565354606, -1.148944832763543, 0.9987575171781369, + -0.7948021627538889, -0.8826768732878423, -0.580385466810923, -0.6017348419812086, -0.08175092778263271, + -0.8735650443548355, -1.7377052841039147, -0.05951247766929535, -2.5206528416011285, -1.7933764768977571, + -2.1718451946572817, -2.6274675994435706, 0.5205005610128361, -1.9806370820239985, -0.8807279117427522, + -2.432841515030087, -0.748939313165398, 0.31611569814275464, -0.8148985868509955, -1.4026280350502227, + -1.6013686350781144, 0.6339168219424205, -0.28161093286260885, -2.6506070625821074, 0.13553562924182194, + -1.1287819710517693, -2.526653678233955, -1.1311711249586727, -0.5520419315880483, -0.7309003147176323, + -2.517742050257219, -0.9936273593978716, -0.5235760322338299, 0.5721018567815837, -0.5300438906332414, + -0.44848706816480066, 0.35776681763356843, -1.933363464839536, -1.1785943085205282, -1.6501913181686465, + -3.060224291525813, 0.2702457317255429, -2.272160941630532, 0.30346150603381283, 0.3946743254607872, + -1.9075888617360115, -0.5981434674443455, -1.241845217529431, -0.9370268620764487, -0.7188818418730767, + -2.227967836902054, -0.6928272950335687, -1.2227002021106779, -1.0724097014966452, -0.7131777917899929, + -1.208150119061548, -1.12344165930703, -2.679458622182234, 0.1463341815775252, -1.6688446476552858, + -1.1057760740577252, -1.8603194400717316, -0.8905371422583319, -1.8369619069208918, -2.3500462422848334, + -1.8102327985342048, -1.8949542385624145, -0.1806230123782191, 0.07997150231582584, -1.6418937689287256, + 1.3060829242327436, 0.5952698528842291, -1.629899089883911, 1.4375380852237019, -0.8683462469016244, + -1.2269953701942853, -2.662225866502311, 0.6798637500185873, -1.209755941254261, 0.4810254748073448, + 0.5945481807494748, -1.5924214306455715, -1.1524294743176549, -2.5055576419676573, -2.3699988946068595, + -0.997248328754261, -2.3888447706809774, -2.9449957058075613, -1.2797650114082701, 2.051842826175498, + -1.7234112998138316, -1.8457947710724092, -1.3016722124005162, -1.840162492752853, -1.2762629377568593, + -1.5052261476393114, -0.035616086702407235, -1.4189034568044891, -2.014394249248568, -0.9895438258021106, + -1.5874610700106082, -2.026733550048122, -0.7356426029470489, -1.6228297498965238, -0.02332524680257908, + 0.011744283768103436, -1.61817389659358, -2.2505906282150763, -2.1359237098529325, 0.33465173630555745, + -3.6123182883724305, 0.273851132065587, 0.498526952110528, -0.5581223350863056, -2.0769393392562274, + 1.6499049956230203, -2.3628941638601573, -0.5420612027018491, 0.6703376229205162, -0.7330884006675499, + -2.230267566673785, -1.3712696517756524, -2.0971002438753876, 0.717998185225404, -2.189097573408178, + -0.25830252113901675, -2.664212998478091, -0.4964384092505931, -2.538870477199072, -0.335762769433682, + -0.7898126210038179, -1.0399972162760738, -2.7580599033568998, -0.8053393201352314, -0.945080289465978, + -1.2894029177647366, -1.5380324534123, -2.1894125904938644, 0.6539594330431009, 0.8558240299869107, + -1.740056104278665, -0.7201908428875745, -1.2233022389528911, -0.24787360904223954, -2.225725138525614, + -1.3655297970019202, -2.1126881646807334, -1.0294888763913745, -0.5450081629795172, -1.9247379309306285, + -1.42910868623237, -0.003333689362976733, -1.7923194564117377, -0.3097849598879948, -1.5849841701261829, + -1.1828885209895261, -1.2441301679141574, -0.588407455787975, -0.830282659928214, 0.19085276560318754, + -1.5192463474753033, 0.9216136501691112, -0.5618773735266807, -1.6217407973078202, 0.15069300759655713, + -2.2478102025850966, -1.104686222901333, -0.35002006536618424, -1.0373824532203293, -0.1598063506400922, + -1.0790750392511248, 1.701012850046574, -0.9229538063335045, 1.1959867075553041, -1.1768103909238807, + -1.4561565422498342, -1.883474476875869, -0.3066893681471934, -0.3270185695592427, -1.4193522821614148, + -1.1420644092442227, 0.9362812318211942, -2.1889037381962955, -2.9395680697270823, -1.2138340101245977, + -2.0418391352438503, -0.5904981891486472, -1.1338292645805876, -2.543867223407066, -0.44720937589427145, + 1.0780376621289678, -2.141855881358829, -1.9741289698406734, -0.9771656862721642, -2.947972479473184, + -2.1353718905004486, -0.6701365163149446, -2.4536558593563593, 0.9014340669686851, -0.05449631629054996, + -1.0348301769216184, -1.5068203670137883, -2.037144596188011, -0.8689331750931241, -2.5529571396994037, + -1.6746838972317617, -1.788399118113161, -1.3153156728694546, -0.02611008918006874, -2.0704706823781707, + -0.0056345452665147455, 0.26041260361568663, -2.499831912792179, -1.8233189877724567, -1.3997253068896698, + -0.5530687176680478, -1.0666662028068734, -0.4811281763177122, -2.242169412329508, -1.7388894392032088, + -0.2591171485099074, 0.7605489545283295, -1.0270234270521226, -2.521294719171065, 1.6907833979389992, + 0.08549624568900471, -0.7402503111402801, -1.1134529642565645, -0.6581871093122293, -0.8913892193235218, + -0.9265175944728868, -1.9080912998455966, -0.21454953805384125, 0.40467955418682533, -2.3276254188418983, + -1.0739216145589245, 0.078228369075241, -1.2111541845292937, -1.259760237524373, -0.7520481417138568, + -1.177019005282897, -1.430339918540043, -0.43612494439197036, -2.217717500358626, -0.3155491309839894, + -0.5205921337804112, -0.9458678892551595, 0.0503805231560257, -1.4743859382629263, 0.20271451579504673, + -0.8994029064568643, -0.7064054069704604, -0.7110794089377301, 0.015719164391638563, -1.8370901247414797, + -1.2324860392507537, -1.1286199397991803, -2.4319889517849322, -1.4228853996822708, -0.7222813314437293, + -0.6502863790345612, -2.686191765283013, -1.1281506529568466, -1.0012062548644451, -0.6555651585037365, + -1.074182772527097, -1.1602261465838468, -1.8529779652010765, -1.1119211258447765, -2.3703419417543383, + 0.30207647084134903, -1.954176337914605, -1.2073333228773628, -1.092060476564429, -1.0548138557032536, + -0.6267453242810681, -2.0593646730501107, -1.7869146163293053, -2.903716277764994, -1.4738316789722, + -0.6724716541908342, 0.591411176762122, 0.3662476926629563, -0.7118675333080166, -2.2245992995267088, + -1.5811412814942547, 0.024995490031355372, -1.400295289398434, -1.2089530029544329, -0.4355610429155642, + -0.376319936884969, -0.7004463663294085, -1.9088615016938033, -2.28979139263122, -1.6320594627079827, + -0.9026727398055358, -2.4259290570051206, -0.8255529961627095, 0.5725969753702853, -1.4341344014271677, + 0.7624855218108073, -2.4286148764759212, -0.6278173809820697, -1.8932378623893606, -0.31348774646200306, + -1.9114676829064812, -1.089583513857778, -1.2842402933892338, 0.009911689063820006, -1.346098474173008, + -1.1960940813367598, -3.381286296926733, -3.111124405106455, -0.9304964288211657, -0.08855208605288856, + -0.36527314555500423, 0.39019417521376587, -1.56223132509813, 0.7522883306124404, -1.4875793600258327, + -1.793897301517104, -0.6795072484845849, -1.4931481513719203, -0.22788075005070563, -1.258902980699591, + -0.31162140826902285, -0.36783020156016566, -1.675799465093641, -0.5605011116671625, -0.05705757948199308, + -2.5050807119175955, -0.9767161030064456, -1.3279656351716438, -1.6768392485755637, -2.5218432706814884, + -2.3458615389379602, -1.2328468072983776, -0.7576406703837554, -2.309611385526755, -1.4945338848063732, + 0.3275460150135001, 0.2407156064572875, 0.4430676617927174, 0.2638934892799809, -1.3740958887427734, + 0.09985095557209833, -0.9216307768147894, 0.0021080772099093537, -2.473294479661514, -2.2583670081520433, + -0.25129036285952155, -0.6034711257111849, -0.673127457570911, -1.4500304227548653, -0.24144786540613183, + -0.14714641724930866, -2.2098168058915544, -1.3138570263825955, 0.056372119815397026, -1.6158989028367103, + -0.3412137017330066, -0.8241210719100278, -0.7662464378023374, 0.6786644814103511, -1.4347942941994545, + -0.3630272019711722, -2.3016418617840166, -0.21873947904887237, -1.3980465685215668, -1.2053117019233848, + 0.5259348077720865, -2.292442026500872, -2.283806718272591, -1.0274435701690168, 1.517554766415623, + 0.9969617939437518, -0.40230090907496197, -1.8287276700911366, -2.0469342502309296, -0.8644342805479912, + -0.9448341202447865, -0.5827750571777882, -0.9294385572005888, 0.2649767441381585, 0.5488638507999921, + -0.18705707501325408, 1.1943773712484247, -0.32393108757576894, -1.7819451617773696, -1.1625512815641572, + -1.1500482866848236, 0.15931827681501143, -0.8571245099639894, -0.8727155829023823, -1.6915429144216847, + -1.4659061503720845, -1.8136696617393409, -1.1916835128535197, -0.18646983800226857, -0.9746016632966369, + 0.0441404734955706, -0.3571058100228609, -0.13220154580257748, 0.5923510536976886, -2.9072563692591773, + -0.5017541389196247, -1.4482912067964298, -0.40828235397574364, 0.13508484372240548, -1.028213812504773, + -0.6603131786148183, 0.11802831790719437, -0.641712812158213, -2.1705519104555897, -0.8082694627624906, + -0.9985992001762029, -0.2435008557603222, -4.054654851235098, 1.402447553323587, -0.7310555708428181, + -1.1177172225573382, -1.8112819525180628, 0.3650188052951131, -0.335639531557298, -0.3687495818314138, + -2.411256847882121, -1.3668089822005067, -1.1560697629044099, -0.3006218189779164, -0.8725594773319494, + -1.37131745765896, -0.13835619199516525, -1.053887227444031, -0.2513625905613912, -1.482225291904533, + -0.02990661443215925, -1.3729348796554084, -1.0835751584623232, 0.27419312071920054, -2.1835219980440828, + 0.9422833588892365, -1.7508840633156373, -0.9631773346765894, 0.19871943079385535, -1.996189334079257, + -1.856454869108322, 0.004550549836906059, -0.36920103382902136, -0.07208379431175183, 0.17664155826254557, + -0.22336765886440946, -1.223766589561458, -1.0145754013153465, -0.12722082001247914, -0.1808245376360691, + -2.0211259056306234, -1.252720041997945, -2.1078618086082996, -0.11691765437730128, -0.39964726471277723 ], - "fillcolor": "rgba(50, 171, 96, 0.3)" - }, - { - "fill": "tonexty", - "line": { - "color": "rgba(128, 0, 128, 1.0)", - "width": "1.3" + "marker": { + "line": { + "color": "#4D5663", + "width": 1.3 + }, + "color": "rgba(50, 171, 96, 1.0)" }, - "mode": "lines", - "name": "d", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149, - 2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654 - ], - "fillcolor": "rgba(128, 0, 128, 0.3)" + "opacity": 0.8, + "histfunc": "count", + "histnorm": "", + "orientation": "v" } ], "layout": { - "legend": { + "title": { "font": { "color": "#4D5663" - }, - "bgcolor": "#F5F6F9" + } }, - "xaxis1": { - "title": "", + "xaxis": { + "title": { + "font": { + "color": "#4D5663" + }, + "text": "" + }, + "showgrid": true, "tickfont": { "color": "#4D5663" }, "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" - }, "zerolinecolor": "#E1E5ED" }, - "yaxis1": { - "title": "", + "yaxis": { + "title": { + "font": { + "color": "#4D5663" + }, + "text": "" + }, + "showgrid": true, "tickfont": { "color": "#4D5663" }, - "zeroline": false, "gridcolor": "#E1E5ED", - "titlefont": { + "zerolinecolor": "#E1E5ED" + }, + "legend": { + "font": { "color": "#4D5663" }, - "zerolinecolor": "#E1E5ED" + "bgcolor": "#F5F6F9" }, - "plot_bgcolor": "#F5F6F9", - "paper_bgcolor": "#F5F6F9" + "barmode": "overlay" }, "frames": [] } From 5f68f16a30b3f92626ce28bf7b4c299646d89e07 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Mon, 25 Nov 2024 22:52:56 +0530 Subject: [PATCH 05/22] Update donut chart plotly adapter (#33337) --- .../DeclarativeChart/PlotlySchemaAdapter.ts | 202 ++++++++++-------- 1 file changed, 112 insertions(+), 90 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index b1e581ff7b1dc..6eb35255c83ff 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1,89 +1,111 @@ import { IDonutChartProps } from '../DonutChart/index'; -import { IChartProps, IVerticalStackedChartProps } from '../../types/IDataPoint'; +import { IChartDataPoint, IVerticalStackedChartProps } from '../../types/IDataPoint'; import { getNextColor } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; export const transformPlotlyJsonToDonutProps = (jsonObj: any): IDonutChartProps => { - const { data, layout } = jsonObj; - const donutData: IChartProps = { - chartTitle: layout.title, - chartData: data[0].labels.map((label: string, index: number) => { - return { - legend: label, - data: data[0].values[index], - color: getNextColor(index), - }; - }), - }; - - const width: number = layout.width || 440; - const height: number = layout.height || 220; - const innerRadius: number = (Math.min(width, height - 40) * (data[0].hole || 0.5)) / 2; - + const { data, layout } = jsonObj; + const firstData = data[0]; + + const donutData = firstData.labels?.map((label: string, index: number): IChartDataPoint => { return { - data: donutData, - hideLegend: !layout.showlegend, - width, - height, - innerRadius, + legend: label, + data: firstData.values?.[index], + color: firstData.marker?.colors?.[index] || getNextColor(index), }; + }); + + // TODO: innerRadius as a fraction needs to be supported internally. The pixel value depends on + // chart dimensions, arc label dimensions and the legend container height, all of which are subject to change. + const width: number = layout?.width || 440; + const height: number = layout?.height || 220; + const hideLabels = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false; + const donutMarginHorizontal = hideLabels ? 0 : 80; + const donutMarginVertical = 40 + (hideLabels ? 0 : 40); + const innerRadius: number = firstData.hole + ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) + : 0; + + const styles: IDonutChartProps['styles'] = { + root: { + '[class^="arcLabel"]': { + fontSize: firstData.textfont?.size, + }, + }, + }; + + return { + data: { + chartTitle: layout?.title, + chartData: donutData, + }, + hideLegend: layout?.showlegend === false ? true : false, + width, + height, + innerRadius, + hideLabels, + showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true, + styles, + // TODO: Render custom hover card based on textinfo + // onRenderCalloutPerDataPoint: undefined, }; - +}; + export const transformPlotlyJsonToColumnProps = (jsonObj: any): IVerticalStackedBarChartProps => { - const { data, layout } = jsonObj; - const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; - let yMaxValue = 0; + const { data, layout } = jsonObj; + const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; + let yMaxValue = 0; - data.forEach((series: any, index1: number) => { - series.x.forEach((x: string | number, index2: number) => { - if (!mapXToDataPoints[x]) { - mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; - } - if (series.type === 'bar') { - mapXToDataPoints[x].chartData.push({ - legend: series.name, - data: series.y[index2], - color: series.marker?.color || getNextColor(index1), - }); - } else if (series.type === 'line') { - mapXToDataPoints[x].lineData!.push({ - legend: series.name, - y: series.y[index2], - color: series.marker?.color || getNextColor(index1), - }); - } - yMaxValue = Math.max(yMaxValue, series.y[index2]); - }); + data.forEach((series: any, index1: number) => { + series.x.forEach((x: string | number, index2: number) => { + if (!mapXToDataPoints[x]) { + mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; + } + if (series.type === 'bar') { + mapXToDataPoints[x].chartData.push({ + legend: series.name, + data: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } else if (series.type === 'line') { + mapXToDataPoints[x].lineData!.push({ + legend: series.name, + y: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } + yMaxValue = Math.max(yMaxValue, series.y[index2]); }); - - return { - data: Object.values(mapXToDataPoints), - chartTitle: layout.title, - // width: layout.width, - // height: layout.height, - barWidth: 'auto', - yMaxValue, - }; + }); + + return { + data: Object.values(mapXToDataPoints), + chartTitle: layout.title, + // width: layout.width, + // height: layout.height, + barWidth: 'auto', + yMaxValue, + }; }; function isTypedArray(a: any) { - return ArrayBuffer.isView(a) && !(a instanceof DataView); + return ArrayBuffer.isView(a) && !(a instanceof DataView); } function isArrayOrTypedArray(a: any) { - return Array.isArray(a) || isTypedArray(a); + return Array.isArray(a) || isTypedArray(a); } function isPlainObject(obj: any) { - if(window && window.process && window.process.versions) { - return Object.prototype.toString.call(obj) === '[object Object]'; - } + if (window && window.process && window.process.versions) { + return Object.prototype.toString.call(obj) === '[object Object]'; + } - return ( - Object.prototype.toString.call(obj) === '[object Object]' && - Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty') - ); -}; + return ( + Object.prototype.toString.call(obj) === '[object Object]' && + Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty') + ); +} var arrayAttributes: any[] = []; var stack: any[] = []; @@ -91,35 +113,35 @@ var isArrayStack: any[] = []; var baseContainer: any, baseAttrName: any; /** * Interate iteratively through the trace object and find all the array attributes. - * 1 trace record = 1 series of data + * 1 trace record = 1 series of data * @param trace */ export function findArrayAttributes(trace: any) { - // Init basecontainer and baseAttrName - crawlIntoTrace(baseContainer, 0, ''); - for (const attribute of arrayAttributes) { - console.log(attribute); - } + // Init basecontainer and baseAttrName + crawlIntoTrace(baseContainer, 0, ''); + for (const attribute of arrayAttributes) { + console.log(attribute); + } } - function crawlIntoTrace(container: any, i: number, astrPartial: any) { - var item = container[stack[i]]; - var newAstrPartial = astrPartial + stack[i]; - if(i === stack.length - 1) { - if(isArrayOrTypedArray(item)) { - arrayAttributes.push(baseAttrName + newAstrPartial); - } - } else { - if(isArrayStack[i]) { - if(Array.isArray(item)) { - for(var j = 0; j < item.length; j++) { - if(isPlainObject(item[j])) { - crawlIntoTrace(item[j], i + 1, newAstrPartial + '[' + j + '].'); - } - } - } - } else if(isPlainObject(item)) { - crawlIntoTrace(item, i + 1, newAstrPartial + '.'); +function crawlIntoTrace(container: any, i: number, astrPartial: any) { + var item = container[stack[i]]; + var newAstrPartial = astrPartial + stack[i]; + if (i === stack.length - 1) { + if (isArrayOrTypedArray(item)) { + arrayAttributes.push(baseAttrName + newAstrPartial); + } + } else { + if (isArrayStack[i]) { + if (Array.isArray(item)) { + for (var j = 0; j < item.length; j++) { + if (isPlainObject(item[j])) { + crawlIntoTrace(item[j], i + 1, newAstrPartial + '[' + j + '].'); + } } + } + } else if (isPlainObject(item)) { + crawlIntoTrace(item, i + 1, newAstrPartial + '.'); } -} \ No newline at end of file + } +} From d336150cd895dd4e1bfb63057e1b88d590870b38 Mon Sep 17 00:00:00 2001 From: srmukher <120183316+srmukher@users.noreply.github.com> Date: Tue, 26 Nov 2024 15:43:43 +0530 Subject: [PATCH 06/22] Line chart plotly adapter (#33334) --- .../DeclarativeChart/DeclarativeChart.tsx | 72 ++++++++++++----- .../DeclarativeChart/PlotlySchemaAdapter.ts | 79 ++++++++++++++++++- 2 files changed, 131 insertions(+), 20 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 315325217fbf0..3b49269cb2c89 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -1,25 +1,59 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; import { DonutChart } from '../DonutChart/index'; import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index'; -import { transformPlotlyJsonToDonutProps, transformPlotlyJsonToColumnProps } from './PlotlySchemaAdapter'; +import { + transformPlotlyJsonToDonutProps, + transformPlotlyJsonToColumnProps, + transformPlotlyJsonToScatterChartProps, + transformPlotlyJsonToHorizontalBarWithAxisProps, +} from './PlotlySchemaAdapter'; +import { LineChart } from '../LineChart/index'; +import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; +import { AreaChart } from '../AreaChart/index'; + +const isDate = (value: any): boolean => !isNaN(Date.parse(value)); +const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); +export const isDateArray = (array: any[]): boolean => Array.isArray(array) && array.every(isDate); +export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber); export interface DeclarativeChartProps extends React.RefAttributes { - /** - * The schema representing the chart - */ - chartSchema: any; - } + /** + * The schema representing the chart + */ + chartSchema: any; +} - export const DeclarativeChart: React.FunctionComponent = React.forwardRef( - (props, forwardedRef) => { - switch (props.chartSchema.data[0].type) { - case 'pie': - return ; - case 'bar': - return ; - default: - return
Unsupported Schema
; - } - }, - ); - DeclarativeChart.displayName = 'DeclarativeChart'; \ No newline at end of file +export const DeclarativeChart: React.FunctionComponent = React.forwardRef< + HTMLDivElement, + DeclarativeChartProps +>((props, forwardedRef) => { + const xValues = props.chartSchema.data[0].x; + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); + + switch (props.chartSchema.data[0].type) { + case 'pie': + return ; + case 'bar': + const orientation = props.chartSchema.data[0].orientation; + if (orientation === 'h') { + return ; + } else { + return ; + } + case 'scatter': + const isAreaChart = props.chartSchema.data.some((series: any) => series.fill === 'tonexty'); + if (isXDate || isXNumber) { + if (isAreaChart) { + return ; + } + return ; + } + return ; + default: + return
Unsupported Schema
; + } +}); +DeclarativeChart.displayName = 'DeclarativeChart'; diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 6eb35255c83ff..8de1380df657f 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -1,7 +1,26 @@ +/* eslint-disable one-var */ +/* eslint-disable vars-on-top */ +/* eslint-disable no-var */ +/* eslint-disable no-console */ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { IDonutChartProps } from '../DonutChart/index'; -import { IChartDataPoint, IVerticalStackedChartProps } from '../../types/IDataPoint'; +import { + IChartDataPoint, + IChartProps, + IHorizontalBarChartWithAxisDataPoint, + ILineChartPoints, + IVerticalStackedChartProps, +} from '../../types/IDataPoint'; import { getNextColor } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; +import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index'; +import { ILineChartProps } from '../LineChart/index'; +import { IAreaChartProps } from '../AreaChart/index'; + +const isDate = (value: any): boolean => !isNaN(Date.parse(value)); +const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); +export const isDateArray = (array: any[]): boolean => Array.isArray(array) && array.every(isDate); +export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber); export const transformPlotlyJsonToDonutProps = (jsonObj: any): IDonutChartProps => { const { data, layout } = jsonObj; @@ -88,6 +107,64 @@ export const transformPlotlyJsonToColumnProps = (jsonObj: any): IVerticalStacked }; }; +export const transformPlotlyJsonToScatterChartProps = ( + jsonObj: any, + isAreaChart: boolean, +): ILineChartProps | IAreaChartProps => { + const { data, layout } = jsonObj; + + const chartData: ILineChartPoints[] = data.map((series: any, index: number) => { + const xValues = series.x; + const isString = typeof xValues[0] === 'string'; + const isXDate = isDateArray(xValues); + const isXNumber = isNumberArray(xValues); + + return { + legend: series.name || `Series ${index + 1}`, + data: xValues.map((x: string | number, i: number) => ({ + x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x as string) : x) : x, + y: series.y[i], + })), + color: series.line?.color || getNextColor(index), + }; + }); + + const chartProps: IChartProps = { + chartTitle: layout.title || '', + lineChartData: chartData, + }; + + if (isAreaChart) { + return { + data: chartProps, + } as IAreaChartProps; + } else { + return { + data: chartProps, + } as ILineChartProps; + } +}; + +export const transformPlotlyJsonToHorizontalBarWithAxisProps = (jsonObj: any): IHorizontalBarChartWithAxisProps => { + const { data, layout } = jsonObj; + + const chartData: IHorizontalBarChartWithAxisDataPoint[] = data + .map((series: any, index: number) => { + return series.y.map((yValue: string, i: number) => ({ + x: series.x[i], + y: yValue, + legend: series.name, + color: series.marker?.color || getNextColor(index), + })); + }) + .flat(); + + return { + data: chartData, + chartTitle: layout.title || '', + }; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } From c515b1266dce7d5063af01526c9adb1c85e599c1 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:04:21 +0530 Subject: [PATCH 07/22] Add heatmap chart plotly adapter (#33343) --- .../DeclarativeChart/DeclarativeChart.tsx | 4 ++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 44 +++++++++++++++++++ .../DeclarativeChart/schema/fluent_donut.json | 2 +- 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 3b49269cb2c89..1d16ef44075bf 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -8,10 +8,12 @@ import { transformPlotlyJsonToColumnProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, + transformPlotlyJsonToHeatmapProps, } from './PlotlySchemaAdapter'; import { LineChart } from '../LineChart/index'; import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; import { AreaChart } from '../AreaChart/index'; +import { HeatMapChart } from '../HeatMapChart/index'; const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); @@ -52,6 +54,8 @@ export const DeclarativeChart: React.FunctionComponent = return ; } return ; + case 'heatmap': + return ; default: return
Unsupported Schema
; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 8de1380df657f..8bd5c0d4de759 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -10,12 +10,15 @@ import { IHorizontalBarChartWithAxisDataPoint, ILineChartPoints, IVerticalStackedChartProps, + IHeatMapChartData, + IHeatMapChartDataPoint, } from '../../types/IDataPoint'; import { getNextColor } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index'; import { ILineChartProps } from '../LineChart/index'; import { IAreaChartProps } from '../AreaChart/index'; +import { IHeatMapChartProps } from '../HeatMapChart/index'; const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); @@ -165,6 +168,47 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (jsonObj: any): I }; }; +// FIXME: Order of string axis ticks does not match the order in plotly json +// TODO: Add support for custom hover card +export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartProps => { + const { data, layout } = jsonObj; + const firstData = data[0]; + const heatmapDataPoints: IHeatMapChartDataPoint[] = []; + let zMin = Number.POSITIVE_INFINITY; + let zMax = Number.NEGATIVE_INFINITY; + + firstData.x?.forEach((xVal: any, xIdx: number) => { + firstData.y?.forEach((yVal: any, yIdx: number) => { + const zVal = firstData.z?.[yIdx]?.[xIdx]; + + heatmapDataPoints.push({ + x: layout.xaxis?.type === 'date' ? new Date(xVal) : xVal, + y: layout.yaxis?.type === 'date' ? new Date(yVal) : yVal, + value: zVal, + }); + + zMin = Math.min(zMin, zVal); + zMax = Math.max(zMax, zVal); + }); + }); + const heatmapData: IHeatMapChartData = { + legend: firstData.name || '', + data: heatmapDataPoints, + value: 0, + }; + + // Convert normalized values to actual values + const domainValuesForColorScale: number[] = firstData.colorscale?.map((arr: any) => arr[0] * (zMax - zMin) + zMin); + const rangeValuesForColorScale: string[] = firstData.colorscale?.map((arr: any) => arr[1]); + + return { + data: [heatmapData], + domainValuesForColorScale, + rangeValuesForColorScale, + hideLegend: true, + }; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json index d6547f0ab7c1e..27aa22a439d13 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json @@ -58,7 +58,7 @@ "t": 25 }, "hovermode": "closest", - "showlegend": false + "showlegend": true }, "frames": [] } From 1cc99367bb1a405c6b4755e5e09009c76bbff4ac Mon Sep 17 00:00:00 2001 From: Anush Gupta <74965306+Anush2303@users.noreply.github.com> Date: Tue, 26 Nov 2024 19:07:00 +0530 Subject: [PATCH 08/22] Add Sankey chart Plotly Adapter (#33345) --- .../DeclarativeChart/DeclarativeChart.tsx | 4 ++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 48 ++++++++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 1d16ef44075bf..7a6da6f404923 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -9,6 +9,7 @@ import { transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, + transformPlotlyJsonToSankeyProps, } from './PlotlySchemaAdapter'; import { LineChart } from '../LineChart/index'; import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; @@ -19,6 +20,7 @@ const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); export const isDateArray = (array: any[]): boolean => Array.isArray(array) && array.every(isDate); export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber); +import { SankeyChart } from '../SankeyChart/SankeyChart'; export interface DeclarativeChartProps extends React.RefAttributes { /** @@ -56,6 +58,8 @@ export const DeclarativeChart: React.FunctionComponent = return ; case 'heatmap': return ; + case 'sankey': + return ; default: return
Unsupported Schema
; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 8bd5c0d4de759..c07bea2023f06 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -12,8 +12,11 @@ import { IVerticalStackedChartProps, IHeatMapChartData, IHeatMapChartDataPoint, + IChartDataPoint, + IVerticalStackedChartProps, } from '../../types/IDataPoint'; -import { getNextColor } from '../../utilities/colors'; +import { ISankeyChartProps } from '../SankeyChart/index'; +import { getNextColor, DataVizPalette } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index'; import { ILineChartProps } from '../LineChart/index'; @@ -209,6 +212,49 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr }; }; +export const transformPlotlyJsonToSankeyProps = (jsonObj: any): ISankeyChartProps => { + const { data, layout } = jsonObj; + const { link, node } = data[0]; + const validLinks = link.value + .map((val: number, index: number) => ({ + value: val, + source: link.source[index], + target: link.target[index], + })) + // eslint-disable-next-line @typescript-eslint/no-shadow + .filter(link => link.source !== link.target); // Filter out self-references(circular links) + + const sankeyChartData = { + nodes: node.label.map((label: string, index: number) => ({ + nodeId: index, + name: label, + color: node.color[index] || DataVizPalette.disabled, + borderColor: node.line?.color || DataVizPalette.disabled, + })), + links: validLinks, + }; + + const width: number = layout?.width || 440; + const height: number = layout?.height || 220; + const styles: ISankeyChartProps['styles'] = { + root: { + fontSize: layout.font?.size, + }, + }; + const shouldResize: number = width + height; + return { + data: { + chartTitle: layout?.title, + SankeyChartData: sankeyChartData, + }, + width, + height, + styles, + shouldResize, + enableReflow: true, + }; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } From cfb35bf49b683cfd58e8c9c8c5a2299b49adee4b Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Tue, 26 Nov 2024 14:45:19 +0000 Subject: [PATCH 09/22] Fix format --- .../react-charting/src/DeclarativeChart.ts | 2 +- .../DeclarativeChart.Basic.Example.tsx | 75 ++++++++++--------- .../DonutChart/DonutChart.Plotly.Example.tsx | 4 +- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/packages/charts/react-charting/src/DeclarativeChart.ts b/packages/charts/react-charting/src/DeclarativeChart.ts index 601785662c577..dadcd45467913 100644 --- a/packages/charts/react-charting/src/DeclarativeChart.ts +++ b/packages/charts/react-charting/src/DeclarativeChart.ts @@ -1 +1 @@ -export * from './components/DeclarativeChart/DeclarativeChart'; \ No newline at end of file +export * from './components/DeclarativeChart/DeclarativeChart'; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index 940db699be683..bb45d088226db 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -7,33 +7,33 @@ interface IDeclarativeChartState { } const options: IDropdownOption[] = [ - { key: 'areachart', text: 'Area Chart'}, - { key: 'donutchart', text: 'Donut Chart'}, - { key: 'gaugechart', text: 'Gauge Chart'}, - { key: 'heatmapchart', text: 'Heatmap Chart'}, - { key: 'horizontalbarchart', text: 'HorizontalBar Chart'}, - { key: 'linechart', text: 'Line Chart'}, - { key: 'piechart', text: 'Pie Chart'}, - { key: 'sankeychart', text: 'Sankey Chart'}, - { key: 'sparklinechart', text: 'Sparkline Chart'}, - { key: 'treemapchart', text: 'Treemap Chart'}, - { key: 'verticalbarchart', text: 'VerticalBar Chart'}, - { key: 'verticalbar_histogramchart', text: 'VerticalBar Histogram Chart'}, + { key: 'areachart', text: 'Area Chart' }, + { key: 'donutchart', text: 'Donut Chart' }, + { key: 'gaugechart', text: 'Gauge Chart' }, + { key: 'heatmapchart', text: 'Heatmap Chart' }, + { key: 'horizontalbarchart', text: 'HorizontalBar Chart' }, + { key: 'linechart', text: 'Line Chart' }, + { key: 'piechart', text: 'Pie Chart' }, + { key: 'sankeychart', text: 'Sankey Chart' }, + { key: 'sparklinechart', text: 'Sparkline Chart' }, + { key: 'treemapchart', text: 'Treemap Chart' }, + { key: 'verticalbarchart', text: 'VerticalBar Chart' }, + { key: 'verticalbar_histogramchart', text: 'VerticalBar Histogram Chart' }, ]; const schemas: any[] = [ - { key: 'areachart', schema: require('./schema/fluent_area.json')}, - { key: 'donutchart', schema: require('./schema/fluent_donut.json')}, - { key: 'gaugechart', schema: require('./schema/fluent_gauge.json')}, - { key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json')}, - { key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json')}, - { key: 'linechart', schema: require('./schema/fluent_line.json')}, - { key: 'piechart', schema: require('./schema/fluent_pie.json')}, - { key: 'sankeychart', schema: require('./schema/fluent_sankey.json')}, - { key: 'sparklinechart', schema: require('./schema/fluent_sparkline.json')}, - { key: 'treemapchart', schema: require('./schema/fluent_treemap.json')}, - { key: 'verticalbarchart', schema: require('./schema/fluent_verticalbar.json')}, - { key: 'verticalbar_histogramchart', schema: require('./schema/fluent_verticalbar_histogram.json')}, + { key: 'areachart', schema: require('./schema/fluent_area.json') }, + { key: 'donutchart', schema: require('./schema/fluent_donut.json') }, + { key: 'gaugechart', schema: require('./schema/fluent_gauge.json') }, + { key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json') }, + { key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json') }, + { key: 'linechart', schema: require('./schema/fluent_line.json') }, + { key: 'piechart', schema: require('./schema/fluent_pie.json') }, + { key: 'sankeychart', schema: require('./schema/fluent_sankey.json') }, + { key: 'sparklinechart', schema: require('./schema/fluent_sparkline.json') }, + { key: 'treemapchart', schema: require('./schema/fluent_treemap.json') }, + { key: 'verticalbarchart', schema: require('./schema/fluent_verticalbar.json') }, + { key: 'verticalbar_histogramchart', schema: require('./schema/fluent_verticalbar_histogram.json') }, ]; const dropdownStyles = { dropdown: { width: 200 } }; @@ -46,33 +46,34 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati }; } + public render(): JSX.Element { + return
{this._createDeclarativeChart()}
; + } + private _onChange = (ev: React.FormEvent, option: IDropdownOption): void => { this.setState({ selectedChoice: option.key as string }); }; private _getSchemaByKey(key: string): any { - const schema = schemas.find(schema => schema.key === key); + const schema = schemas.find(x => x.key === key); return schema ? schema.schema : null; } - public render(): JSX.Element { - return
{this._createDeclarativeChart()}
; - } - private _createDeclarativeChart(): JSX.Element { const selectedSchema = this._getSchemaByKey(this.state.selectedChoice); return ( <> -

- + label="Select a schema" + options={options} + onChange={this._onChange} + selectedKey={this.state.selectedChoice} + styles={dropdownStyles} + /> +
+
+ ); } diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx index d7a1803fe442f..f93e8cd1ed8b1 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx @@ -46,6 +46,6 @@ const plotlyJson = { export class DonutChartPlotlyExample extends React.Component<{}, {}> { public render(): React.ReactNode { - return ; + return ; } -} \ No newline at end of file +} From 9fb25124a855f50c18c7ae8ea3493a155757c567 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Tue, 26 Nov 2024 14:45:59 +0000 Subject: [PATCH 10/22] Add change file --- ...eact-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json diff --git a/change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json b/change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json new file mode 100644 index 0000000000000..8bb8819872d1a --- /dev/null +++ b/change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Create declarative chart component", + "packageName": "@fluentui/react-charting", + "email": "98592573+AtishayMsft@users.noreply.github.com", + "dependentChangeType": "patch" +} From d262be4f0276499b19c6ffe1f78717e937eb4ead Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Tue, 26 Nov 2024 15:02:56 +0000 Subject: [PATCH 11/22] Update name --- .../src/components/DeclarativeChart/PlotlySchemaAdapter.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index c07bea2023f06..735bbb6a8ff1f 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -12,8 +12,6 @@ import { IVerticalStackedChartProps, IHeatMapChartData, IHeatMapChartDataPoint, - IChartDataPoint, - IVerticalStackedChartProps, } from '../../types/IDataPoint'; import { ISankeyChartProps } from '../SankeyChart/index'; import { getNextColor, DataVizPalette } from '../../utilities/colors'; @@ -222,7 +220,8 @@ export const transformPlotlyJsonToSankeyProps = (jsonObj: any): ISankeyChartProp target: link.target[index], })) // eslint-disable-next-line @typescript-eslint/no-shadow - .filter(link => link.source !== link.target); // Filter out self-references(circular links) + //@ts-expect-error Dynamic link object. Ignore for now. + .filter(x => x.source !== x.target); // Filter out self-references(circular links) const sankeyChartData = { nodes: node.label.map((label: string, index: number) => ({ From 3ccae08abc4b6c226b7282d1372348b68deb70e0 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Tue, 26 Nov 2024 15:18:23 +0000 Subject: [PATCH 12/22] Fix build --- .../DeclarativeChart/DeclarativeChartPage.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx index 86303063931f6..319e936c7bb2e 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChartPage.tsx @@ -1,12 +1,6 @@ import * as React from 'react'; -import { - ComponentPage, - ExampleCard, - IComponentDemoPageProps, - PropertiesTableSet, - Markdown, -} from '@fluentui/react-docsite-components'; +import { ComponentPage, ExampleCard, IComponentDemoPageProps, Markdown } from '@fluentui/react-docsite-components'; import { DeclarativeChartBasicExample } from './DeclarativeChart.Basic.Example'; From 80076f4757734e37726f512e19f0cb98507c9783 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 09:08:33 +0000 Subject: [PATCH 13/22] Add declarative chart to docsite --- apps/public-docsite-resources/config/api-docs.js | 1 + apps/public-docsite-resources/src/AppDefinition.tsx | 6 ++++++ .../pages/Charting/DeclarativeChartPage.tsx | 11 +++++++++++ .../SiteDefinition.pages/Controls/web.tsx | 1 + .../DeclarativeChartPage/DeclarativeChartPage.doc.ts | 8 ++++++++ .../DeclarativeChartPage/DeclarativeChartPage.tsx | 8 ++++++++ .../charts/react-charting/etc/react-charting.api.md | 4 ++-- .../components/DeclarativeChart/DeclarativeChart.tsx | 8 ++++++++ 8 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 5be57b5efd760..dd0d6824c0b5f 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -108,6 +108,7 @@ module.exports = { 'MultiStackedBarChart', 'TreeChart', 'VerticalStackedBarChart', + 'DeclarativeChart', ], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index f7d284bd30360..3e95dbfb4c25e 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -627,6 +627,12 @@ export const AppDefinition: IAppDefinition = { name: 'TreeChart', url: '#/examples/TreeChart', }, + { + component: require('./components/pages/Charting/DeclarativeChartPage').DeclarativeChartPage, + key: 'DeclarativeChart', + name: 'DeclarativeChart', + url: '#/examples/DeclarativeChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx new file mode 100644 index 0000000000000..8be1ab14efb2b --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { DeclarativeChartPageProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc'; + +export const DeclarativeChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 1eab21581cc14..b9230b95c05ad 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -131,6 +131,7 @@ export const categories: { [name: string]: ICategory } = { SankeyChart: {}, SparklineChart: {}, TreeChart: {}, + DeclarativeChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts new file mode 100644 index 0000000000000..2729da3b9d9f4 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { DeclarativeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc'; + +export const DeclarativeChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx b/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx new file mode 100644 index 0000000000000..b5b13f5a0d67f --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { DeclarativeChartPageProps } from './DeclarativeChartPage.doc'; + +export const DeclarativeChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 5b88f1a0a7065..610324684b388 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -119,10 +119,10 @@ export const DataVizPalette: { highSuccess: string; }; -// @public (undocumented) +// @public export const DeclarativeChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export interface DeclarativeChartProps extends React_2.RefAttributes { chartSchema: any; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 7a6da6f404923..16ebcd33988da 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -22,6 +22,10 @@ export const isDateArray = (array: any[]): boolean => Array.isArray(array) && ar export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber); import { SankeyChart } from '../SankeyChart/SankeyChart'; +/** + * DeclarativeChart props. + * {@docCategory DeclarativeChart} + */ export interface DeclarativeChartProps extends React.RefAttributes { /** * The schema representing the chart @@ -29,6 +33,10 @@ export interface DeclarativeChartProps extends React.RefAttributes = React.forwardRef< HTMLDivElement, DeclarativeChartProps From 6fa24762ac3bfac059cbc189cac2bb7cc14e8b2c Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 09:31:39 +0000 Subject: [PATCH 14/22] Update tsconfig for examples --- packages/react-examples/tsconfig.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-examples/tsconfig.json b/packages/react-examples/tsconfig.json index fe13d94ef3091..836132501e529 100644 --- a/packages/react-examples/tsconfig.json +++ b/packages/react-examples/tsconfig.json @@ -15,6 +15,8 @@ "moduleResolution": "node", "preserveConstEnums": true, "skipLibCheck": true, + "resolveJsonModule": true, + "esModuleInterop": true, "lib": ["es5", "dom", "es2015.promise"], "typeRoots": ["../../node_modules", "../../node_modules/@types", "../../typings"], "types": ["webpack-env", "custom-global", "node", "cypress", "cypress-real-events"], From 3d6b38d81a275ab44a65928c43f650b87c2f7849 Mon Sep 17 00:00:00 2001 From: srmukher <120183316+srmukher@users.noreply.github.com> Date: Wed, 27 Nov 2024 15:08:37 +0530 Subject: [PATCH 15/22] Applying styles to horizontal bar chart with axis using plotly data (#33351) --- .../DeclarativeChart/DeclarativeChart.tsx | 7 ++----- .../DeclarativeChart/PlotlySchemaAdapter.ts | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 16ebcd33988da..764ee66f811b8 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -8,6 +8,8 @@ import { transformPlotlyJsonToColumnProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, + isDateArray, + isNumberArray, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, } from './PlotlySchemaAdapter'; @@ -15,11 +17,6 @@ import { LineChart } from '../LineChart/index'; import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; import { AreaChart } from '../AreaChart/index'; import { HeatMapChart } from '../HeatMapChart/index'; - -const isDate = (value: any): boolean => !isNaN(Date.parse(value)); -const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); -export const isDateArray = (array: any[]): boolean => Array.isArray(array) && array.every(isDate); -export const isNumberArray = (array: any[]): boolean => Array.isArray(array) && array.every(isNumber); import { SankeyChart } from '../SankeyChart/SankeyChart'; /** diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 735bbb6a8ff1f..9e5c38eccc593 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -157,15 +157,31 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (jsonObj: any): I return series.y.map((yValue: string, i: number) => ({ x: series.x[i], y: yValue, - legend: series.name, + legend: yValue, color: series.marker?.color || getNextColor(index), })); }) .flat(); + const chartHeight = layout.height || 350; + const margin = layout.margin?.l || 0; + const padding = layout.margin?.pad || 0; + const availableHeight = chartHeight - margin - padding; + const numberOfBars = data[0].y.length; + const gapFactor = 0.5; + const barHeight = availableHeight / (numberOfBars * (1 + gapFactor)); + return { data: chartData, chartTitle: layout.title || '', + barHeight, + showYAxisLables: true, + styles: { + root: { + height: chartHeight, + width: layout.width || 600, + }, + }, }; }; From 54db5eab8cc7736098ddf2fa5eb3a8c2e73b27d1 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 11:27:53 +0000 Subject: [PATCH 16/22] Fix tslint --- .../DeclarativeChart.Basic.Example.tsx | 6 +- .../DeclarativeChart/schema/fluent_area.json | 103 ----------------- .../DeclarativeChart/schema/fluent_area.ts | 104 ++++++++++++++++++ .../DeclarativeChart/schema/fluent_donut.json | 64 ----------- .../DeclarativeChart/schema/fluent_donut.ts | 65 +++++++++++ 5 files changed, 173 insertions(+), 169 deletions(-) delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index bb45d088226db..16fce8a17b6f8 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; +import { areaSchema } from './schema/fluent_area'; +import { donutSchema } from './schema/fluent_donut'; interface IDeclarativeChartState { selectedChoice: string; @@ -22,8 +24,8 @@ const options: IDropdownOption[] = [ ]; const schemas: any[] = [ - { key: 'areachart', schema: require('./schema/fluent_area.json') }, - { key: 'donutchart', schema: require('./schema/fluent_donut.json') }, + { key: 'areachart', schema: areaSchema }, + { key: 'donutchart', schema: donutSchema }, { key: 'gaugechart', schema: require('./schema/fluent_gauge.json') }, { key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json') }, { key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json') }, diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json deleted file mode 100644 index 9094067577064..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json +++ /dev/null @@ -1,103 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "fill": "tonexty", - "line": { - "color": "rgba(255, 153, 51, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "a", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754, - 0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841 - ], - "fillcolor": "rgba(255, 153, 51, 0.3)" - }, - { - "fill": "tonexty", - "line": { - "color": "rgba(55, 128, 191, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "b", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392, - 1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878 - ], - "fillcolor": "rgba(55, 128, 191, 0.3)" - }, - { - "fill": "tonexty", - "line": { - "color": "rgba(50, 171, 96, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "c", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358, - 1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171 - ], - "fillcolor": "rgba(50, 171, 96, 0.3)" - }, - { - "fill": "tonexty", - "line": { - "color": "rgba(128, 0, 128, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "d", - "type": "scatter", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [ - 1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149, - 2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654 - ], - "fillcolor": "rgba(128, 0, 128, 0.3)" - } - ], - "layout": { - "legend": { - "font": { - "color": "#4D5663" - }, - "bgcolor": "#F5F6F9" - }, - "xaxis1": { - "title": "", - "tickfont": { - "color": "#4D5663" - }, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" - }, - "zerolinecolor": "#E1E5ED" - }, - "yaxis1": { - "title": "", - "tickfont": { - "color": "#4D5663" - }, - "zeroline": false, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" - }, - "zerolinecolor": "#E1E5ED" - }, - "plot_bgcolor": "#F5F6F9", - "paper_bgcolor": "#F5F6F9" - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts new file mode 100644 index 0000000000000..14bc986a816bb --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts @@ -0,0 +1,104 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const areaSchema = { + visualizer: 'plotly', + data: [ + { + fill: 'tonexty', + line: { + color: 'rgba(255, 153, 51, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'a', + type: 'scatter', + x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + y: [ + 0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754, + 0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841, + ], + fillcolor: 'rgba(255, 153, 51, 0.3)', + }, + { + fill: 'tonexty', + line: { + color: 'rgba(55, 128, 191, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'b', + type: 'scatter', + x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + y: [ + 1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392, + 1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878, + ], + fillcolor: 'rgba(55, 128, 191, 0.3)', + }, + { + fill: 'tonexty', + line: { + color: 'rgba(50, 171, 96, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'c', + type: 'scatter', + x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + y: [ + 1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358, + 1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171, + ], + fillcolor: 'rgba(50, 171, 96, 0.3)', + }, + { + fill: 'tonexty', + line: { + color: 'rgba(128, 0, 128, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'd', + type: 'scatter', + x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + y: [ + 1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149, + 2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654, + ], + fillcolor: 'rgba(128, 0, 128, 0.3)', + }, + ], + layout: { + legend: { + font: { + color: '#4D5663', + }, + bgcolor: '#F5F6F9', + }, + xaxis1: { + title: '', + tickfont: { + color: '#4D5663', + }, + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', + }, + zerolinecolor: '#E1E5ED', + }, + yaxis1: { + title: '', + tickfont: { + color: '#4D5663', + }, + zeroline: false, + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', + }, + zerolinecolor: '#E1E5ED', + }, + plot_bgcolor: '#F5F6F9', + paper_bgcolor: '#F5F6F9', + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json deleted file mode 100644 index 27aa22a439d13..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "hole": 0.6, - "type": "pie", - "frame": null, - "marker": { - "line": { - "color": "transparent" - }, - "color": "rgba(31,119,180,1)", - "fillcolor": "rgba(31,119,180,1)" - }, - "labels": [ - "AMC", - "Cadillac", - "Camaro", - "Chrysler", - "Datsun", - "Dodge", - "Duster", - "Ferrari", - "Fiat", - "Ford", - "Honda", - "Hornet", - "Lincoln", - "Lotus", - "Maserati", - "Mazda", - "Merc", - "Pontiac", - "Porsche", - "Toyota", - "Valiant", - "Volvo" - ], - "values": [1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1, 2, 7, 1, 1, 2, 1, 1] - } - ], - "layout": { - "title": "Donut charts using Plotly", - "xaxis": { - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis": { - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "margin": { - "b": 40, - "l": 60, - "r": 10, - "t": 25 - }, - "hovermode": "closest", - "showlegend": true - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts new file mode 100644 index 0000000000000..8ccc16428e6e4 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts @@ -0,0 +1,65 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const donutSchema = { + visualizer: 'plotly', + data: [ + { + hole: 0.6, + type: 'pie', + frame: null, + marker: { + line: { + color: 'transparent', + }, + color: 'rgba(31,119,180,1)', + fillcolor: 'rgba(31,119,180,1)', + }, + labels: [ + 'AMC', + 'Cadillac', + 'Camaro', + 'Chrysler', + 'Datsun', + 'Dodge', + 'Duster', + 'Ferrari', + 'Fiat', + 'Ford', + 'Honda', + 'Hornet', + 'Lincoln', + 'Lotus', + 'Maserati', + 'Mazda', + 'Merc', + 'Pontiac', + 'Porsche', + 'Toyota', + 'Valiant', + 'Volvo', + ], + values: [1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1, 2, 7, 1, 1, 2, 1, 1], + }, + ], + layout: { + title: 'Donut charts using Plotly', + xaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + yaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + margin: { + b: 40, + l: 60, + r: 10, + t: 25, + }, + hovermode: 'closest', + showlegend: true, + }, + frames: [], +}; From bcd2da9008d6a744326002f11d8da39eea829133 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Wed, 27 Nov 2024 16:58:41 +0530 Subject: [PATCH 17/22] Add gauge chart plotly adapter and example (#33352) --- .../DeclarativeChart/DeclarativeChart.tsx | 7 ++ .../DeclarativeChart/PlotlySchemaAdapter.ts | 50 ++++++++++- .../DeclarativeChart/schema/fluent_gauge.json | 88 ++++++------------- 3 files changed, 82 insertions(+), 63 deletions(-) diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index 764ee66f811b8..e9de24c6f9f1b 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -12,12 +12,14 @@ import { isNumberArray, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, + transformPlotlyJsonToGaugeProps, } from './PlotlySchemaAdapter'; import { LineChart } from '../LineChart/index'; import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; import { AreaChart } from '../AreaChart/index'; import { HeatMapChart } from '../HeatMapChart/index'; import { SankeyChart } from '../SankeyChart/SankeyChart'; +import { GaugeChart } from '../GaugeChart/index'; /** * DeclarativeChart props. @@ -65,6 +67,11 @@ export const DeclarativeChart: React.FunctionComponent = return ; case 'sankey': return ; + case 'indicator': + if (props.chartSchema?.data?.[0]?.mode?.includes('gauge')) { + return ; + } + return
Unsupported Schema
; default: return
Unsupported Schema
; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 9e5c38eccc593..427a18bb17862 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -14,12 +14,13 @@ import { IHeatMapChartDataPoint, } from '../../types/IDataPoint'; import { ISankeyChartProps } from '../SankeyChart/index'; -import { getNextColor, DataVizPalette } from '../../utilities/colors'; +import { getNextColor, DataVizPalette, getColorFromToken } from '../../utilities/colors'; import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index'; import { ILineChartProps } from '../LineChart/index'; import { IAreaChartProps } from '../AreaChart/index'; import { IHeatMapChartProps } from '../HeatMapChart/index'; +import { IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index'; const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); @@ -270,6 +271,53 @@ export const transformPlotlyJsonToSankeyProps = (jsonObj: any): ISankeyChartProp }; }; +export const transformPlotlyJsonToGaugeProps = (jsonObj: any): IGaugeChartProps => { + const { data, layout } = jsonObj; + const firstData = data[0]; + + const segments = firstData.gauge?.steps?.map((step: any, index: number): IGaugeChartSegment => { + return { + legend: step.name || `Segment ${index + 1}`, + size: step.range?.[1] - step.range?.[0], + color: step.color || getNextColor(index), + }; + }); + + let sublabel: string | undefined; + let sublabelColor: string | undefined; + if (typeof firstData.delta?.reference === 'number') { + const diff = firstData.value - firstData.delta.reference; + if (diff >= 0) { + sublabel = `\u25B2 ${diff}`; + sublabelColor = firstData.delta.increasing?.color || getColorFromToken(DataVizPalette.success); + } else { + sublabel = `\u25BC ${Math.abs(diff)}`; + sublabelColor = firstData.delta.decreasing?.color || getColorFromToken(DataVizPalette.error); + } + } + + const styles: IGaugeChartProps['styles'] = { + sublabel: { + fill: sublabelColor, + }, + }; + + return { + segments, + chartValue: firstData.value, + chartTitle: firstData.title?.text, + sublabel, + // range values can be null + minValue: firstData.gauge?.axis?.range?.[0] ?? undefined, + maxValue: firstData.gauge?.axis?.range?.[1] ?? undefined, + chartValueFormat: () => firstData.value, + width: layout?.width, + height: layout?.height, + hideLegend: true, + styles, + }; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json index 9e372fdd511a9..c92d0d6c0c9ee 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json @@ -2,71 +2,35 @@ "visualizer": "plotly", "data": [ { - "name": "speed", - "text": 2468, - "type": "scatter", - "x": [0], - "y": [0], - "marker": { - "size": 28, - "color": "850000" - }, - "hoverinfo": "text+name", - "showlegend": false - }, - { - "hole": 0.5, - "type": "pie", - "marker": { - "colors": [ - "rgba(14, 127, 0, .5)", - "rgba(110, 154, 22, .5)", - "rgba(170, 202, 42, .5)", - "rgba(202, 209, 95, .5)", - "rgba(210, 206, 145, .5)", - "rgba(232, 226, 202, .5)", - "rgba(255, 255, 255, 0)" - ] - }, - "text": ["60% +", "50%", "40%", "30%", "20%", "10%", ""], - "rotation": 90, - "textinfo": "text", - "hoverinfo": "label", - "labels": ["151-180", "121-150", "91-120", "61-90", "31-60", "0-30", ""], - "values": [ - 8.333333333333334, 8.333333333333334, 8.333333333333334, 8.333333333333334, 8.333333333333334, - 8.333333333333334, 50 - ], - "showlegend": false, - "textposition": "inside" + "type": "indicator", + "mode": "gauge+number+delta", + "value": 420, + "title": { "text": "Speed", "font": { "size": 24 } }, + "delta": { "reference": 400, "increasing": { "color": "RebeccaPurple" } }, + "gauge": { + "axis": { "range": [null, 500], "tickwidth": 1, "tickcolor": "darkblue" }, + "bar": { "color": "darkblue" }, + "bgcolor": "white", + "borderwidth": 2, + "bordercolor": "gray", + "steps": [ + { "range": [0, 250], "color": "cyan" }, + { "range": [250, 400], "color": "royalblue" } + ], + "threshold": { + "line": { "color": "red", "width": 4 }, + "thickness": 0.75, + "value": 490 + } + } } ], "layout": { - "title": "Gauge", - "width": 1000, - "xaxis": { - "range": [-1, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis": { - "range": [-1, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "height": 1000, - "shapes": [ - { - "line": { - "color": "850000" - }, - "path": "M -.0 -0.025 L .0 0.025 L -0.659197688992 0.751969684779 Z", - "type": "path", - "fillcolor": "850000" - } - ] + "width": 500, + "height": 400, + "margin": { "t": 25, "r": 25, "l": 25, "b": 25 }, + "paper_bgcolor": "lavender", + "font": { "color": "darkblue", "family": "Arial" } }, "frames": [] } From 40ae2ac63e99a55a4deb02f74707ef11388b86c0 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 11:59:23 +0000 Subject: [PATCH 18/22] Change relative imports to absolute --- .../DeclarativeChart/DeclarativeChart.Basic.Example.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index 16fce8a17b6f8..6d691b41e1366 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; -import { areaSchema } from './schema/fluent_area'; -import { donutSchema } from './schema/fluent_donut'; +import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area'; +import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut'; interface IDeclarativeChartState { selectedChoice: string; From 4aba25e33f286ea52ca2b34dbb23fb21f13a9fce Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 12:46:00 +0000 Subject: [PATCH 19/22] Rename schema files to test --- .../DeclarativeChart/DeclarativeChart.Basic.Example.tsx | 4 ++-- .../schema/{fluent_area.ts => fluent_area.test.ts} | 0 .../schema/{fluent_donut.ts => fluent_donut.test.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_area.ts => fluent_area.test.ts} (100%) rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_donut.ts => fluent_donut.test.ts} (100%) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index 6d691b41e1366..927d27600e4da 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; -import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area'; -import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut'; +import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test'; +import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test'; interface IDeclarativeChartState { selectedChoice: string; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test.ts similarity index 100% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test.ts diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test.ts similarity index 100% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test.ts From 4f58b97f05be13681d4152ba94a98099f6f7bd16 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 12:56:29 +0000 Subject: [PATCH 20/22] Allow deep imports --- .../DeclarativeChart/DeclarativeChart.Basic.Example.tsx | 4 ++-- .../schema/{fluent_area.test.ts => fluent_area.ts} | 0 .../schema/{fluent_donut.test.ts => fluent_donut.ts} | 0 scripts/tasks/src/lint-imports.ts | 1 + 4 files changed, 3 insertions(+), 2 deletions(-) rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_area.test.ts => fluent_area.ts} (100%) rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_donut.test.ts => fluent_donut.ts} (100%) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index 927d27600e4da..6d691b41e1366 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; -import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test'; -import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test'; +import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area'; +import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut'; interface IDeclarativeChartState { selectedChoice: string; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts similarity index 100% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.test.ts rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts similarity index 100% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.test.ts rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.ts diff --git a/scripts/tasks/src/lint-imports.ts b/scripts/tasks/src/lint-imports.ts index 005d583372802..ff62b66fc7738 100644 --- a/scripts/tasks/src/lint-imports.ts +++ b/scripts/tasks/src/lint-imports.ts @@ -97,6 +97,7 @@ function lintImports( '@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers', '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example', '@fluentui/react-examples/lib/react/Keytip/KeytipSetup', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema', '@fluentui/react-charting/lib/types/IDataPoint', '@fluentui/react-experiments/lib/utilities/scrolling/ScrollContainer', // Once the components using this data are promoted, the data should go into @fluentui/example-data From 4f4f60f85d4248f3845fece0caac549872c954e1 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:47:37 +0000 Subject: [PATCH 21/22] Update schema files --- .../DeclarativeChart.Basic.Example.tsx | 28 +- .../DeclarativeChart/schema/fluent_gauge.json | 36 - .../DeclarativeChart/schema/fluent_gauge.ts | 37 + ...{fluent_heatmap.json => fluent_heatmap.ts} | 217 +- .../schema/fluent_horizontalbar.json | 87 - .../schema/fluent_horizontalbar.ts | 88 + .../DeclarativeChart/schema/fluent_line.json | 439 ---- .../DeclarativeChart/schema/fluent_line.ts | 440 ++++ .../DeclarativeChart/schema/fluent_pie.json | 24 - .../DeclarativeChart/schema/fluent_pie.ts | 25 + .../schema/fluent_sankey.json | 79 - .../DeclarativeChart/schema/fluent_sankey.ts | 80 + .../schema/fluent_sparkline.json | 911 -------- .../schema/fluent_treemap.json | 1918 ----------------- .../schema/fluent_verticalbar.json | 79 - .../schema/fluent_verticalbar.ts | 80 + ...m.json => fluent_verticalbar_histogram.ts} | 157 +- scripts/tasks/src/lint-imports.ts | 11 +- 18 files changed, 964 insertions(+), 3772 deletions(-) delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.ts rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_heatmap.json => fluent_heatmap.ts} (75%) delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.ts delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.ts delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.ts delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.ts delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json delete mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json create mode 100644 packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.ts rename packages/react-examples/src/react-charting/DeclarativeChart/schema/{fluent_verticalbar_histogram.json => fluent_verticalbar_histogram.ts} (97%) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index 6d691b41e1366..b7f9c71c6c462 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -3,6 +3,14 @@ import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area'; import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut'; +import { gaugeSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge'; +import { heatmapSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap'; +import { hbcSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar'; +import { lineSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line'; +import { pieSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie'; +import { sankeySchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey'; +import { vbcHistogramSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram'; +import { vbcSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar'; interface IDeclarativeChartState { selectedChoice: string; @@ -17,8 +25,6 @@ const options: IDropdownOption[] = [ { key: 'linechart', text: 'Line Chart' }, { key: 'piechart', text: 'Pie Chart' }, { key: 'sankeychart', text: 'Sankey Chart' }, - { key: 'sparklinechart', text: 'Sparkline Chart' }, - { key: 'treemapchart', text: 'Treemap Chart' }, { key: 'verticalbarchart', text: 'VerticalBar Chart' }, { key: 'verticalbar_histogramchart', text: 'VerticalBar Histogram Chart' }, ]; @@ -26,16 +32,14 @@ const options: IDropdownOption[] = [ const schemas: any[] = [ { key: 'areachart', schema: areaSchema }, { key: 'donutchart', schema: donutSchema }, - { key: 'gaugechart', schema: require('./schema/fluent_gauge.json') }, - { key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json') }, - { key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json') }, - { key: 'linechart', schema: require('./schema/fluent_line.json') }, - { key: 'piechart', schema: require('./schema/fluent_pie.json') }, - { key: 'sankeychart', schema: require('./schema/fluent_sankey.json') }, - { key: 'sparklinechart', schema: require('./schema/fluent_sparkline.json') }, - { key: 'treemapchart', schema: require('./schema/fluent_treemap.json') }, - { key: 'verticalbarchart', schema: require('./schema/fluent_verticalbar.json') }, - { key: 'verticalbar_histogramchart', schema: require('./schema/fluent_verticalbar_histogram.json') }, + { key: 'gaugechart', schema: gaugeSchema }, + { key: 'heatmapchart', schema: heatmapSchema }, + { key: 'horizontalbarchart', schema: hbcSchema }, + { key: 'linechart', schema: lineSchema }, + { key: 'piechart', schema: pieSchema }, + { key: 'sankeychart', schema: sankeySchema }, + { key: 'verticalbarchart', schema: vbcHistogramSchema }, + { key: 'verticalbar_histogramchart', schema: vbcSchema }, ]; const dropdownStyles = { dropdown: { width: 200 } }; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json deleted file mode 100644 index c92d0d6c0c9ee..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "type": "indicator", - "mode": "gauge+number+delta", - "value": 420, - "title": { "text": "Speed", "font": { "size": 24 } }, - "delta": { "reference": 400, "increasing": { "color": "RebeccaPurple" } }, - "gauge": { - "axis": { "range": [null, 500], "tickwidth": 1, "tickcolor": "darkblue" }, - "bar": { "color": "darkblue" }, - "bgcolor": "white", - "borderwidth": 2, - "bordercolor": "gray", - "steps": [ - { "range": [0, 250], "color": "cyan" }, - { "range": [250, 400], "color": "royalblue" } - ], - "threshold": { - "line": { "color": "red", "width": 4 }, - "thickness": 0.75, - "value": 490 - } - } - } - ], - "layout": { - "width": 500, - "height": 400, - "margin": { "t": 25, "r": 25, "l": 25, "b": 25 }, - "paper_bgcolor": "lavender", - "font": { "color": "darkblue", "family": "Arial" } - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.ts new file mode 100644 index 0000000000000..f61e72fa46ca0 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge.ts @@ -0,0 +1,37 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const gaugeSchema = { + visualizer: 'plotly', + data: [ + { + type: 'indicator', + mode: 'gauge+number+delta', + value: 420, + title: { text: 'Speed', font: { size: 24 } }, + delta: { reference: 400, increasing: { color: 'RebeccaPurple' } }, + gauge: { + axis: { range: [null, 500], tickwidth: 1, tickcolor: 'darkblue' }, + bar: { color: 'darkblue' }, + bgcolor: 'white', + borderwidth: 2, + bordercolor: 'gray', + steps: [ + { range: [0, 250], color: 'cyan' }, + { range: [250, 400], color: 'royalblue' }, + ], + threshold: { + line: { color: 'red', width: 4 }, + thickness: 0.75, + value: 490, + }, + }, + }, + ], + layout: { + width: 500, + height: 400, + margin: { t: 25, r: 25, l: 25, b: 25 }, + paper_bgcolor: 'lavender', + font: { color: 'darkblue', family: 'Arial' }, + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.ts similarity index 75% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.ts index 838e81191b432..2c26de91af525 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.json +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap.ts @@ -1,221 +1,222 @@ -{ - "visualizer": "plotly", - "data": [ +/* eslint-disable @typescript-eslint/naming-convention */ +export const heatmapSchema = { + visualizer: 'plotly', + data: [ { - "type": "heatmap", - "x": [ - "x_0", - "x_1", - "x_2", - "x_3", - "x_4", - "x_5", - "x_6", - "x_7", - "x_8", - "x_9", - "x_10", - "x_11", - "x_12", - "x_13", - "x_14", - "x_15", - "x_16", - "x_17", - "x_18", - "x_19" + type: 'heatmap', + x: [ + 'x_0', + 'x_1', + 'x_2', + 'x_3', + 'x_4', + 'x_5', + 'x_6', + 'x_7', + 'x_8', + 'x_9', + 'x_10', + 'x_11', + 'x_12', + 'x_13', + 'x_14', + 'x_15', + 'x_16', + 'x_17', + 'x_18', + 'x_19', ], - "y": [ - "y_0", - "y_1", - "y_2", - "y_3", - "y_4", - "y_5", - "y_6", - "y_7", - "y_8", - "y_9", - "y_10", - "y_11", - "y_12", - "y_13", - "y_14", - "y_15", - "y_16", - "y_17", - "y_18", - "y_19" + y: [ + 'y_0', + 'y_1', + 'y_2', + 'y_3', + 'y_4', + 'y_5', + 'y_6', + 'y_7', + 'y_8', + 'y_9', + 'y_10', + 'y_11', + 'y_12', + 'y_13', + 'y_14', + 'y_15', + 'y_16', + 'y_17', + 'y_18', + 'y_19', ], - "z": [ + z: [ [ 12.0, 11.697147742124411, 7.1748009833505355, 11.443688379214382, 23.648522429525176, 10.040502684649338, 10.819974608119614, 20.83991840239746, 14.378243279399832, 9.546437633051273, 2.117430162487592, 24.053122758748437, 14.741753869753929, 11.223068582526338, 2.9058799108357736, 12.523922839169199, - 12.426446278371158, 15.786820017213348, 25.828355052498736, 15.884458175971286 + 12.426446278371158, 15.786820017213348, 25.828355052498736, 15.884458175971286, ], [ 18.072596781382654, 6.872368565119988, 2.6331323456979367, 8.910260123844887, 23.29825386450679, 9.18418261775059, 18.052236884018036, 32.088269277118485, 15.862814449470617, 20.517302217015732, 1.5668378537843557, 19.031137709612036, 12.133745300119848, 8.724453334098921, 8.972456038301432, - 9.771921362871048, 4.761205803361531, 23.82727745555418, 14.369250386770794, 9.730029718884163 + 9.771921362871048, 4.761205803361531, 23.82727745555418, 14.369250386770794, 9.730029718884163, ], [ 16.104827483834423, 16.816096580158092, -1.0796033248100874, 13.037577162924944, 25.071276081749808, -6.016235615271988, 12.248777535804365, 35.617617939013286, 20.621055215762404, 18.321563171124787, 5.106104151848498, 20.47764211274059, 13.078423154116999, 4.270904076038434, 10.32885307002288, - 11.953280688550777, 1.5514493835400103, 28.102083355215736, 11.122082151320692, 17.271525748515398 + 11.953280688550777, 1.5514493835400103, 28.102083355215736, 11.122082151320692, 17.271525748515398, ], [ 12.732656491556462, 24.158612074358526, 1.8639666906231516, 9.195075731494875, 19.788944565361437, -6.833645216204284, 9.969142303073252, 46.34145242145437, 27.310374393715577, 15.451738777747869, 6.691398648622392, 14.55281641333698, 31.321025344254267, 9.311054030160307, 12.004790333591908, - 13.059625413572078, 10.25485330260371, 29.181400631242038, 17.203123079730577, 15.96262678993938 + 13.059625413572078, 10.25485330260371, 29.181400631242038, 17.203123079730577, 15.96262678993938, ], [ 10.424697200562369, 28.78022939969912, 3.274446200066722, 8.669870516018236, 17.75655781585482, -6.896721183137775, 17.337127681913973, 42.70107878756259, 27.376076996458107, 10.416788406228507, 5.9545352540812, 15.043018310072712, 32.12573718137715, 11.294834569956391, 16.313424113247194, - 15.444451104553893, 10.443516068409753, 33.07558322142471, 22.67825393852671, 14.910979364805373 + 15.444451104553893, 10.443516068409753, 33.07558322142471, 22.67825393852671, 14.910979364805373, ], [ 1.3848305486418013, 28.88858899620542, 12.971410893817621, 21.143305039916708, 7.466382276034302, -2.108394838355938, 16.027000754389025, 40.70844626018491, 25.966261645863177, 0.9043901831061678, -0.6718858579700804, 2.6597070827875093, 36.093975687401766, 12.79240265673884, 16.292076219475025, - 13.792475502830154, 9.90068532879486, 36.74806639404701, 26.577346684827898, 16.005211030243927 + 13.792475502830154, 9.90068532879486, 36.74806639404701, 26.577346684827898, 16.005211030243927, ], [ -6.877933971525136, 44.04384439381119, 13.548126342387011, 17.74014481550033, 15.7912983146064, -6.563883600581922, 21.49865383744765, 38.24729505908534, 25.710457133039732, 2.2251747151953722, -10.093623877175773, 1.9137585062069147, 28.853944000537858, 9.119846857537635, 16.770107402461807, - 7.3577813910229235, 5.875139865786533, 39.12143717188403, 1.341905660672623, 16.777803239858564 + 7.3577813910229235, 5.875139865786533, 39.12143717188403, 1.341905660672623, 16.777803239858564, ], [ -7.513284950652834, 44.21182779048812, 14.479713711226983, 17.660499931671584, 14.436062506263415, -8.630753569571617, 18.920515851612024, 41.961872256649784, 30.992785862263872, 0.3821317782171232, -9.481337721021028, 1.6266164906990555, 20.52198483872326, 9.822475957217343, 15.658011352744083, - 12.855391500184762, 10.723957376497331, 41.76485494373556, 2.2340479176319485, 16.088953253894616 + 12.855391500184762, 10.723957376497331, 41.76485494373556, 2.2340479176319485, 16.088953253894616, ], [ 0.02929945240777787, 47.8943258538308, 13.4384038570412, 17.917433759396193, 17.039432522289083, -4.774743239794282, 12.169188113505435, 40.42317097918186, 37.22474246115934, 0.22091049853526112, -9.687370268531138, 10.608534707379862, 22.489367975650175, 10.669348146795615, 13.95650541886101, - 6.839552569406474, 2.066756467090924, 54.581934085152405, 3.5319443821756225, 24.532968918280666 + 6.839552569406474, 2.066756467090924, 54.581934085152405, 3.5319443821756225, 24.532968918280666, ], [ 1.3315750803470996, 45.90255894008207, 9.162060301209916, -1.2943200134022526, 21.982396858443334, -2.0046315173801657, 23.75776947991829, 42.681396519281044, 44.65189694360409, -3.233129329636757, -11.7007015295863, 8.768962763531919, 21.48008268870696, 11.750650693071353, 10.314016323078881, - 6.044971885000999, 0.39568846222827236, 56.79992555682459, 9.686881597266042, 29.573837224244713 + 6.044971885000999, 0.39568846222827236, 56.79992555682459, 9.686881597266042, 29.573837224244713, ], [ -0.34155835630595655, 52.257883472637104, 14.63013635132661, -1.1475310646451669, 19.815434611539906, -0.3597615447940745, 22.773438522174473, 45.16830973647258, 50.90620858214391, -4.123416917882673, -10.08874106711032, 17.77058648507848, 17.40525407651549, 19.428287067763215, 10.154808609159593, - 9.41560200751194, 1.9106824056688325, 55.50321452563245, -1.086930629298445, 29.942519927990794 + 9.41560200751194, 1.9106824056688325, 55.50321452563245, -1.086930629298445, 29.942519927990794, ], [ -1.2496939708148902, 52.0753263525035, 16.573843720560127, 0.6254954059905691, 25.67070005332393, 2.8833642841959586, 21.05489065711163, 45.54977153406254, 54.790476948309696, -1.1319446806674005, -6.836880142255078, 15.502730715077965, 16.434991284495794, 20.05330736176254, 2.3102989662620654, - 6.6400837474901095, 3.4554008460006247, 54.703320294165096, -3.275155410653531, 34.69783250602105 + 6.6400837474901095, 3.4554008460006247, 54.703320294165096, -3.275155410653531, 34.69783250602105, ], [ 3.673504371828866, 55.66537870906952, 22.222025244923273, -2.1871046243479864, 28.014054309766728, -1.9343227464152601, 29.16438526268995, 44.051494895676456, 47.138525452751004, -2.533067604753474, 2.4604369987892873, 19.673236477344094, 23.43582349379937, 18.46461800040717, 3.2513035287755745, - 7.4638277204597046, 5.836414662127938, 63.63736027633095, -2.3182235215935463, 28.362102774855607 + 7.4638277204597046, 5.836414662127938, 63.63736027633095, -2.3182235215935463, 28.362102774855607, ], [ 9.197351864496074, 55.98556586180058, 19.688495387348357, -1.1757697666321, 26.78831096366896, -5.206570891432279, 29.755041090905404, 35.45913888587404, 48.543398737558654, 3.274578409778302, 7.640442280843416, 6.615425581412669, 27.520672134556655, 17.13948338893387, -0.7130168306222968, - 3.4923248627721257, 10.663420634170265, 62.79712211239938, -7.102421907260435, 25.96909143426486 + 3.4923248627721257, 10.663420634170265, 62.79712211239938, -7.102421907260435, 25.96909143426486, ], [ 17.878378279408615, 65.61603877495548, 21.1073514253479, -9.253213203481765, 27.879670681460908, -2.8320537701090256, 26.13796211607032, 24.926244822709098, 41.22820882460708, 4.291828909220028, 4.713688574820864, 16.71505221410986, 27.48982397761371, 14.998235183145638, -1.0419904618770504, - -0.1509352342460648, 11.562765259884168, 54.381939331520186, -15.369316543252658, 25.018616836414115 + -0.1509352342460648, 11.562765259884168, 54.381939331520186, -15.369316543252658, 25.018616836414115, ], [ 18.3594620989525, 66.76755465163893, 23.378561600159312, -9.221557127656212, 28.23165649899542, -0.3620931039471351, 28.91643855216486, 11.188848304771073, 43.30138646653476, 5.000880279196099, 1.955677009677276, 17.279662785715818, 26.178614647552152, 21.57198989722974, -1.3161643920050667, - -9.439334496282449, 18.312638310718047, 54.77270799612626, -13.618633943842825, 34.04601203745518 + -9.439334496282449, 18.312638310718047, 54.77270799612626, -13.618633943842825, 34.04601203745518, ], [ 9.52854140993721, 66.15934256222516, 25.727095609917317, -16.01042996598902, 24.77811171644336, -1.2825355952790376, 19.064261874916085, 14.509555473536986, 43.57067434580797, 7.890650307112603, 1.6731169765193206, 11.216733394728445, 25.858459074516183, 18.23274943606415, -1.5424885952686824, - -9.408565254995368, 24.78142561950699, 55.72892300395096, -6.132435488791322, 32.12418971970468 + -9.408565254995368, 24.78142561950699, 55.72892300395096, -6.132435488791322, 32.12418971970468, ], [ 8.834804620855842, 58.63396530456222, 32.725737544844485, -13.465901648481573, 31.313375862796256, -1.937020141351771, 14.893297536987049, 23.629750932895455, 41.77269087492713, 9.082388429023517, -6.034577415215565, 26.401238496860607, 30.051671106505943, 23.834062269627154, -3.561155588342318, - -10.717340944667358, 25.98741506616426, 55.13836837404197, -12.222227236438126, 30.768724196434682 + -10.717340944667358, 25.98741506616426, 55.13836837404197, -12.222227236438126, 30.768724196434682, ], [ 2.008683713506029, 68.77074374390875, 27.561261630596558, -11.972754232678293, 27.652138241890253, -8.994598412149836, 16.01202612993778, 27.496822437992087, 42.223038572972655, 9.14302748045202, -9.49672264010566, 25.872388552562622, 29.591488992612543, 17.887210405056912, -5.273287251587566, - -12.231659074097587, 25.21878307435221, 55.4498407189013, -16.160855914516, 32.26936734704534 + -12.231659074097587, 25.21878307435221, 55.4498407189013, -16.160855914516, 32.26936734704534, ], [ 1.4746401926975559, 76.5710413276318, 22.444170064560886, -11.754560357801614, 31.65020848831535, -6.747073251084499, 10.677375854561543, 18.290237353501528, 44.04246479548906, -0.9669084139974888, -10.02999798650989, 26.331023176529538, 23.744787277420585, 21.58401811955205, -5.054619683005746, - -12.304220941049874, 22.0278850405599, 68.76140423378733, -11.104838839030073, 32.93901719565705 - ] + -12.304220941049874, 22.0278850405599, 68.76140423378733, -11.104838839030073, 32.93901719565705, + ], + ], + colorscale: [ + [0.0, 'rgb(158,1,66)'], + [0.1, 'rgb(213,62,79)'], + [0.2, 'rgb(244,109,67)'], + [0.3, 'rgb(253,174,97)'], + [0.4, 'rgb(254,224,139)'], + [0.5, 'rgb(255,255,191)'], + [0.6, 'rgb(230,245,152)'], + [0.7, 'rgb(171,221,164)'], + [0.8, 'rgb(102,194,165)'], + [0.9, 'rgb(50,136,189)'], + [1.0, 'rgb(94,79,162)'], ], - "colorscale": [ - [0.0, "rgb(158,1,66)"], - [0.1, "rgb(213,62,79)"], - [0.2, "rgb(244,109,67)"], - [0.3, "rgb(253,174,97)"], - [0.4, "rgb(254,224,139)"], - [0.5, "rgb(255,255,191)"], - [0.6, "rgb(230,245,152)"], - [0.7, "rgb(171,221,164)"], - [0.8, "rgb(102,194,165)"], - [0.9, "rgb(50,136,189)"], - [1.0, "rgb(94,79,162)"] - ] - } + }, ], - "layout": { - "legend": { - "font": { - "color": "#4D5663" + layout: { + legend: { + font: { + color: '#4D5663', }, - "bgcolor": "#F5F6F9" + bgcolor: '#F5F6F9', }, - "xaxis1": { - "title": "", - "tickfont": { - "color": "#4D5663" + xaxis1: { + title: '', + tickfont: { + color: '#4D5663', }, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', }, - "zerolinecolor": "#E1E5ED" + zerolinecolor: '#E1E5ED', }, - "yaxis1": { - "title": "", - "tickfont": { - "color": "#4D5663" + yaxis1: { + title: '', + tickfont: { + color: '#4D5663', }, - "zeroline": false, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" + zeroline: false, + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', }, - "zerolinecolor": "#E1E5ED" + zerolinecolor: '#E1E5ED', }, - "plot_bgcolor": "#F5F6F9", - "paper_bgcolor": "#F5F6F9" + plot_bgcolor: '#F5F6F9', + paper_bgcolor: '#F5F6F9', }, - "frames": [] -} + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json deleted file mode 100644 index fcb6208421273..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.json +++ /dev/null @@ -1,87 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "uid": "2f399e", - "name": "Votes", - "type": "bar", - "x": [1659, 1067, 671, 597, 504, 418, 407, 390, 378, 274, 255, 243, 203, 169, 79, 65, 42, 35, 35, 25, 17, 11, 10], - "y": [ - "Laravel", - "Symfony2", - "Nette", - "CodeIgniter", - "Yii 2", - "PHPixie", - "Yii 1", - "Zend Framework 2", - "Company Internal Framework", - "Zend Framework 1", - "CakePHP", - "No Framework", - "We use a CMS for everything", - "Phalcon", - "Slim", - "Silex", - "Simple MVC Framework", - "Typo 3", - "Kohana", - "FuelPHP", - "TYPO3 Flow", - "Drupal", - "Aura" - ], - "zmax": 1, - "zmin": 0, - "xbins": { - "end": 2499.5, - "size": 500, - "start": -500.5 - }, - "ybins": { - "end": 23.5, - "size": 1, - "start": -1.5 - }, - "opacity": 1, - "visible": true, - "autobinx": true, - "autobiny": true, - "contours": { - "end": 0.901, - "size": 0.1, - "start": 0.1, - "coloring": "fill", - "showlines": true - }, - "showlegend": true, - "orientation": "h" - } - ], - "layout": { - "title": "PHP Framework Popularity at Work - SitePoint, 2015", - "width": 1151, - "xaxis": { - "type": "linear", - "range": [-198.2562959184288, 1830.6731869091736], - "title": "Votes", - "autorange": false - }, - "yaxis": { - "type": "category", - "range": [-3.301575351429676, 23.42061223132087], - "title": "Framework", - "autorange": false - }, - "height": 742, - "margin": { - "l": 210, - "pad": 4 - }, - "barmode": "group", - "barnorm": "", - "autosize": true, - "showlegend": false - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.ts new file mode 100644 index 0000000000000..9dfcdf63de52c --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar.ts @@ -0,0 +1,88 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const hbcSchema = { + visualizer: 'plotly', + data: [ + { + uid: '2f399e', + name: 'Votes', + type: 'bar', + x: [1659, 1067, 671, 597, 504, 418, 407, 390, 378, 274, 255, 243, 203, 169, 79, 65, 42, 35, 35, 25, 17, 11, 10], + y: [ + 'Laravel', + 'Symfony2', + 'Nette', + 'CodeIgniter', + 'Yii 2', + 'PHPixie', + 'Yii 1', + 'Zend Framework 2', + 'Company Internal Framework', + 'Zend Framework 1', + 'CakePHP', + 'No Framework', + 'We use a CMS for everything', + 'Phalcon', + 'Slim', + 'Silex', + 'Simple MVC Framework', + 'Typo 3', + 'Kohana', + 'FuelPHP', + 'TYPO3 Flow', + 'Drupal', + 'Aura', + ], + zmax: 1, + zmin: 0, + xbins: { + end: 2499.5, + size: 500, + start: -500.5, + }, + ybins: { + end: 23.5, + size: 1, + start: -1.5, + }, + opacity: 1, + visible: true, + autobinx: true, + autobiny: true, + contours: { + end: 0.901, + size: 0.1, + start: 0.1, + coloring: 'fill', + showlines: true, + }, + showlegend: true, + orientation: 'h', + }, + ], + layout: { + title: 'PHP Framework Popularity at Work - SitePoint, 2015', + width: 1151, + xaxis: { + type: 'linear', + range: [-198.2562959184288, 1830.6731869091736], + title: 'Votes', + autorange: false, + }, + yaxis: { + type: 'category', + range: [-3.301575351429676, 23.42061223132087], + title: 'Framework', + autorange: false, + }, + height: 742, + margin: { + l: 210, + pad: 4, + }, + barmode: 'group', + barnorm: '', + autosize: true, + showlegend: false, + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json deleted file mode 100644 index 4197999e2576f..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.json +++ /dev/null @@ -1,439 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "line": { - "color": "rgba(255, 153, 51, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "Trace 0", - "type": "scatter", - "x": [ - "2015-01-01", - "2015-01-02", - "2015-01-03", - "2015-01-04", - "2015-01-05", - "2015-01-06", - "2015-01-07", - "2015-01-08", - "2015-01-09", - "2015-01-10", - "2015-01-11", - "2015-01-12", - "2015-01-13", - "2015-01-14", - "2015-01-15", - "2015-01-16", - "2015-01-17", - "2015-01-18", - "2015-01-19", - "2015-01-20", - "2015-01-21", - "2015-01-22", - "2015-01-23", - "2015-01-24", - "2015-01-25", - "2015-01-26", - "2015-01-27", - "2015-01-28", - "2015-01-29", - "2015-01-30", - "2015-01-31", - "2015-02-01", - "2015-02-02", - "2015-02-03", - "2015-02-04", - "2015-02-05", - "2015-02-06", - "2015-02-07", - "2015-02-08", - "2015-02-09", - "2015-02-10", - "2015-02-11", - "2015-02-12", - "2015-02-13", - "2015-02-14", - "2015-02-15", - "2015-02-16", - "2015-02-17", - "2015-02-18", - "2015-02-19", - "2015-02-20", - "2015-02-21", - "2015-02-22", - "2015-02-23", - "2015-02-24", - "2015-02-25", - "2015-02-26", - "2015-02-27", - "2015-02-28", - "2015-03-01", - "2015-03-02", - "2015-03-03", - "2015-03-04", - "2015-03-05", - "2015-03-06", - "2015-03-07", - "2015-03-08", - "2015-03-09", - "2015-03-10", - "2015-03-11", - "2015-03-12", - "2015-03-13", - "2015-03-14", - "2015-03-15", - "2015-03-16", - "2015-03-17", - "2015-03-18", - "2015-03-19", - "2015-03-20", - "2015-03-21", - "2015-03-22", - "2015-03-23", - "2015-03-24", - "2015-03-25", - "2015-03-26", - "2015-03-27", - "2015-03-28", - "2015-03-29", - "2015-03-30", - "2015-03-31", - "2015-04-01", - "2015-04-02", - "2015-04-03", - "2015-04-04", - "2015-04-05", - "2015-04-06", - "2015-04-07", - "2015-04-08", - "2015-04-09", - "2015-04-10" - ], - "y": [ - 0.5353935439391206, -0.3510205670171982, -1.3420793330744663, -1.683479706754631, -2.0207368899942826, - 0.006604084375472663, 0.8037048387382045, 1.6685589999803645, 1.2683547027403048, -1.3330462677331034, - -1.8663123665480104, -2.8051461261147357, -4.563508055068453, -3.7591847216910996, -3.5134185618878746, - -5.3419268826351995, -3.332156069299614, -3.5678897362109545, -3.8548236009547465, -4.58628192762981, - -4.116554826788904, -2.7610003378381496, -2.621859111953831, -2.6349689848833315, -2.0581142585936076, - -0.7744078058377932, 0.9002451055355818, 0.8373590393039949, 0.5532093840234236, 1.469976651890828, - 3.1860367266233904, 2.493612510772345, 1.9464391258267615, 1.8807283125005585, 3.0189402685173534, - 4.556005864163605, 5.516442345945973, 4.319606652282435, 6.845756127344204, 7.053236096270982, - 7.681494725458877, 7.526563745782537, 8.858342186205558, 9.021889375014881, 8.209805336778926, - 9.383959972549016, 11.195848970970625, 12.561537445362251, 14.373511358982237, 15.887456275652418, - 14.491455240251522, 15.199461217404735, 16.378844807972094, 14.348345501207364, 14.961597203409823, - 15.457566696478484, 14.942769687687289, 15.721527909780036, 13.091278962257627, 14.295247001092115, - 15.296655272416865, 14.436440585461526, 13.912453188370755, 12.433861225213807, 14.061345247447989, - 13.326092951912521, 13.566974950387175, 12.96345607653163, 12.205278846692087, 11.364010452431279, - 12.120962982512733, 13.570258079014422, 14.613857418348378, 15.48868026864105, 15.421250297066777, - 16.562957844203055, 16.365666723485436, 15.848038393086913, 16.170083705874156, 16.446617416519754, - 15.024371154281331, 14.802238239296665, 13.156751496135007, 14.06168725142282, 14.94588113322983, - 14.127589669913032, 13.885898170515487, 13.692030694564533, 14.943253908206318, 14.529368596515058, - 14.661473471114782, 13.67375983483632, 13.382284458918326, 12.527287002966496, 12.767994473001014, - 12.651030056419879, 12.141617852418765, 13.606694447410502, 13.923089943159189, 14.003348672865656 - ] - }, - { - "line": { - "color": "rgba(55, 128, 191, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "Trace 1", - "type": "scatter", - "x": [ - "2015-01-01", - "2015-01-02", - "2015-01-03", - "2015-01-04", - "2015-01-05", - "2015-01-06", - "2015-01-07", - "2015-01-08", - "2015-01-09", - "2015-01-10", - "2015-01-11", - "2015-01-12", - "2015-01-13", - "2015-01-14", - "2015-01-15", - "2015-01-16", - "2015-01-17", - "2015-01-18", - "2015-01-19", - "2015-01-20", - "2015-01-21", - "2015-01-22", - "2015-01-23", - "2015-01-24", - "2015-01-25", - "2015-01-26", - "2015-01-27", - "2015-01-28", - "2015-01-29", - "2015-01-30", - "2015-01-31", - "2015-02-01", - "2015-02-02", - "2015-02-03", - "2015-02-04", - "2015-02-05", - "2015-02-06", - "2015-02-07", - "2015-02-08", - "2015-02-09", - "2015-02-10", - "2015-02-11", - "2015-02-12", - "2015-02-13", - "2015-02-14", - "2015-02-15", - "2015-02-16", - "2015-02-17", - "2015-02-18", - "2015-02-19", - "2015-02-20", - "2015-02-21", - "2015-02-22", - "2015-02-23", - "2015-02-24", - "2015-02-25", - "2015-02-26", - "2015-02-27", - "2015-02-28", - "2015-03-01", - "2015-03-02", - "2015-03-03", - "2015-03-04", - "2015-03-05", - "2015-03-06", - "2015-03-07", - "2015-03-08", - "2015-03-09", - "2015-03-10", - "2015-03-11", - "2015-03-12", - "2015-03-13", - "2015-03-14", - "2015-03-15", - "2015-03-16", - "2015-03-17", - "2015-03-18", - "2015-03-19", - "2015-03-20", - "2015-03-21", - "2015-03-22", - "2015-03-23", - "2015-03-24", - "2015-03-25", - "2015-03-26", - "2015-03-27", - "2015-03-28", - "2015-03-29", - "2015-03-30", - "2015-03-31", - "2015-04-01", - "2015-04-02", - "2015-04-03", - "2015-04-04", - "2015-04-05", - "2015-04-06", - "2015-04-07", - "2015-04-08", - "2015-04-09", - "2015-04-10" - ], - "y": [ - -2.58404773330316, -1.9162964761259451, -1.8899798841571565, -1.098466181069551, -1.2161136413159992, - -0.9298011508867184, -2.5216450120142193, -1.5547013224314532, -3.1293219775443117, -2.7232351981528025, - -1.704449229625379, -1.2702366750752472, -1.7688923656442583, -1.9810878959630682, -1.0881359248000217, - -0.5214761704035035, -0.639866394654719, -2.258513886233204, -0.8711892253875131, -0.45426547393253053, - -2.4076676391235785, -2.2450025826137097, -2.3488062397069234, -3.2188990647525304, -2.6042445674055594, - -2.9702468803291966, -4.139691822816822, -3.9967022316870042, -4.796271521377118, -5.244924380701339, - -6.965620503609484, -6.430396926773768, -5.234457265252843, -6.181791776690352, -7.3464387119459085, - -7.085650875056526, -6.795217278293396, -6.08725142043377, -5.3416313194169875, -4.900094995211111, - -4.715363010029477, -3.6757033584677927, -5.873900613367271, -7.685787089886274, -8.833149292574403, - -9.373517123532867, -10.519456187180836, -8.012082850355387, -8.556759031756883, -8.78527769843948, - -8.801850250864483, -9.031427690493008, -9.289972806031075, -8.434541044235305, -8.543619303217836, - -9.817816201809572, -9.691704922707196, -9.172230718814316, -10.389025830978015, -9.418276522564378, - -8.844666134378604, -10.649699554950736, -11.433978738990442, -11.022214964648152, -11.156982299530265, - -12.846500605483975, -12.700459270895378, -13.701718476553872, -14.281259852458456, -13.197701892598191, - -13.444607930505104, -12.703127086621702, -12.38184968649959, -13.545422038889187, -12.062411162554307, - -12.190051993521331, -13.801739083658532, -14.198265394729127, -14.29078542197376, -13.45263060195906, - -13.130412206893606, -14.189794518505105, -12.647928857811877, -13.252175401809115, -13.526006774399674, - -13.640567463371012, -13.234252510186453, -12.313307209824384, -11.218557557877709, -10.7821947135954, - -8.89016408336461, -9.662631443485989, -6.909371824212538, -7.048202688582138, -4.971706592042745, - -4.310618310025603, -2.954237793688564, -2.0883264569176156, 1.1805740980198571, 0.5040426644599496 - ] - }, - { - "line": { - "color": "rgba(50, 171, 96, 1.0)", - "width": "1.3" - }, - "mode": "lines", - "name": "Trace 2", - "type": "scatter", - "x": [ - "2015-01-01", - "2015-01-02", - "2015-01-03", - "2015-01-04", - "2015-01-05", - "2015-01-06", - "2015-01-07", - "2015-01-08", - "2015-01-09", - "2015-01-10", - "2015-01-11", - "2015-01-12", - "2015-01-13", - "2015-01-14", - "2015-01-15", - "2015-01-16", - "2015-01-17", - "2015-01-18", - "2015-01-19", - "2015-01-20", - "2015-01-21", - "2015-01-22", - "2015-01-23", - "2015-01-24", - "2015-01-25", - "2015-01-26", - "2015-01-27", - "2015-01-28", - "2015-01-29", - "2015-01-30", - "2015-01-31", - "2015-02-01", - "2015-02-02", - "2015-02-03", - "2015-02-04", - "2015-02-05", - "2015-02-06", - "2015-02-07", - "2015-02-08", - "2015-02-09", - "2015-02-10", - "2015-02-11", - "2015-02-12", - "2015-02-13", - "2015-02-14", - "2015-02-15", - "2015-02-16", - "2015-02-17", - "2015-02-18", - "2015-02-19", - "2015-02-20", - "2015-02-21", - "2015-02-22", - "2015-02-23", - "2015-02-24", - "2015-02-25", - "2015-02-26", - "2015-02-27", - "2015-02-28", - "2015-03-01", - "2015-03-02", - "2015-03-03", - "2015-03-04", - "2015-03-05", - "2015-03-06", - "2015-03-07", - "2015-03-08", - "2015-03-09", - "2015-03-10", - "2015-03-11", - "2015-03-12", - "2015-03-13", - "2015-03-14", - "2015-03-15", - "2015-03-16", - "2015-03-17", - "2015-03-18", - "2015-03-19", - "2015-03-20", - "2015-03-21", - "2015-03-22", - "2015-03-23", - "2015-03-24", - "2015-03-25", - "2015-03-26", - "2015-03-27", - "2015-03-28", - "2015-03-29", - "2015-03-30", - "2015-03-31", - "2015-04-01", - "2015-04-02", - "2015-04-03", - "2015-04-04", - "2015-04-05", - "2015-04-06", - "2015-04-07", - "2015-04-08", - "2015-04-09", - "2015-04-10" - ], - "y": [ - 0.4661114764240781, 1.0610769506804194, 1.0620659379275244, -0.5603096501263787, -0.22966983294858567, - 1.1358334022099883, 1.8697838063194905, 1.8307593169232188, 2.6294937170536055, 1.456439760404607, - 3.571977139947352, 3.305623978930223, 4.369054542737759, 4.134928856846778, 2.525747905079978, 4.45625041538837, - 5.331621195457201, 5.01722152487662, 3.2730061427478807, 2.3895586625726164, 1.5551868349111646, - 0.9222137047406664, -0.2408476097748915, -0.7735805458656726, -0.8871954038346644, -1.9822438634492547, - -0.8886612143982666, -0.7149527896910689, -1.1377284325144619, -1.7585300048885872, -2.8117170543153254, - -2.6809842525932175, -1.6457602974924186, -2.1361202183757593, -3.506112394459107, -3.338531391597358, - -5.511057758779813, -3.5261371875358676, -4.05255557741406, -5.188415501615373, -6.032557392677557, - -5.6858700345353785, -6.667528307767753, -6.733517550988596, -7.0502984033473615, -7.574898212324232, - -7.1843491903366, -6.080355259797091, -6.398354606750326, -6.286331305269291, -7.175762338255774, - -6.6277002690607105, -6.031655281290095, -5.243102836583583, -4.612608200873672, -5.180512683218164, - -5.0321319726702916, -4.567844497333498, -3.347239903958168, -2.5263058621799597, -3.554423668680612, - -1.7466537357472816, 0.08618389027480222, 1.0223852208396356, 2.2260700096326724, 2.976731277433707, - 2.5457541264066235, 2.412842465270771, 2.1270496073872933, 4.350264423349324, 3.6000820362032346, - 3.6547717673422704, 4.29856786980301, 4.61832134099102, 5.1364308299997825, 5.647209819441451, - 6.041357011724418, 4.789997568683162, 6.041650920258338, 5.860878612223213, 5.6050673038102214, - 3.900259274681964, 2.1974477295325476, 0.979239291658772, 0.9769412141062032, 1.1215546396840912, - 1.4131546401228463, -0.5715019565360024, -0.4798030419178908, -0.19867316746947167, -1.3237063703965808, - -1.5132847802948692, -0.9466159703619573, 1.3543877997088902, 1.3745632832250965, 1.2843024279329955, - 1.1384756757773304, 1.841477239971831, 1.0626945214201182, 1.6018849370336259 - ] - } - ], - "layout": { - "legend": { - "font": { - "color": "#4D5663" - }, - "bgcolor": "#F5F6F9" - }, - "xaxis1": { - "title": "", - "tickfont": { - "color": "#4D5663" - }, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" - }, - "zerolinecolor": "#E1E5ED" - }, - "yaxis1": { - "title": "Price", - "tickfont": { - "color": "#4D5663" - }, - "zeroline": false, - "gridcolor": "#E1E5ED", - "titlefont": { - "color": "#4D5663" - }, - "tickprefix": "$", - "zerolinecolor": "#E1E5ED" - }, - "plot_bgcolor": "#F5F6F9", - "paper_bgcolor": "#F5F6F9" - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.ts new file mode 100644 index 0000000000000..4b56a5ca97c6b --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line.ts @@ -0,0 +1,440 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const lineSchema = { + visualizer: 'plotly', + data: [ + { + line: { + color: 'rgba(255, 153, 51, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'Trace 0', + type: 'scatter', + x: [ + '2015-01-01', + '2015-01-02', + '2015-01-03', + '2015-01-04', + '2015-01-05', + '2015-01-06', + '2015-01-07', + '2015-01-08', + '2015-01-09', + '2015-01-10', + '2015-01-11', + '2015-01-12', + '2015-01-13', + '2015-01-14', + '2015-01-15', + '2015-01-16', + '2015-01-17', + '2015-01-18', + '2015-01-19', + '2015-01-20', + '2015-01-21', + '2015-01-22', + '2015-01-23', + '2015-01-24', + '2015-01-25', + '2015-01-26', + '2015-01-27', + '2015-01-28', + '2015-01-29', + '2015-01-30', + '2015-01-31', + '2015-02-01', + '2015-02-02', + '2015-02-03', + '2015-02-04', + '2015-02-05', + '2015-02-06', + '2015-02-07', + '2015-02-08', + '2015-02-09', + '2015-02-10', + '2015-02-11', + '2015-02-12', + '2015-02-13', + '2015-02-14', + '2015-02-15', + '2015-02-16', + '2015-02-17', + '2015-02-18', + '2015-02-19', + '2015-02-20', + '2015-02-21', + '2015-02-22', + '2015-02-23', + '2015-02-24', + '2015-02-25', + '2015-02-26', + '2015-02-27', + '2015-02-28', + '2015-03-01', + '2015-03-02', + '2015-03-03', + '2015-03-04', + '2015-03-05', + '2015-03-06', + '2015-03-07', + '2015-03-08', + '2015-03-09', + '2015-03-10', + '2015-03-11', + '2015-03-12', + '2015-03-13', + '2015-03-14', + '2015-03-15', + '2015-03-16', + '2015-03-17', + '2015-03-18', + '2015-03-19', + '2015-03-20', + '2015-03-21', + '2015-03-22', + '2015-03-23', + '2015-03-24', + '2015-03-25', + '2015-03-26', + '2015-03-27', + '2015-03-28', + '2015-03-29', + '2015-03-30', + '2015-03-31', + '2015-04-01', + '2015-04-02', + '2015-04-03', + '2015-04-04', + '2015-04-05', + '2015-04-06', + '2015-04-07', + '2015-04-08', + '2015-04-09', + '2015-04-10', + ], + y: [ + 0.5353935439391206, -0.3510205670171982, -1.3420793330744663, -1.683479706754631, -2.0207368899942826, + 0.006604084375472663, 0.8037048387382045, 1.6685589999803645, 1.2683547027403048, -1.3330462677331034, + -1.8663123665480104, -2.8051461261147357, -4.563508055068453, -3.7591847216910996, -3.5134185618878746, + -5.3419268826351995, -3.332156069299614, -3.5678897362109545, -3.8548236009547465, -4.58628192762981, + -4.116554826788904, -2.7610003378381496, -2.621859111953831, -2.6349689848833315, -2.0581142585936076, + -0.7744078058377932, 0.9002451055355818, 0.8373590393039949, 0.5532093840234236, 1.469976651890828, + 3.1860367266233904, 2.493612510772345, 1.9464391258267615, 1.8807283125005585, 3.0189402685173534, + 4.556005864163605, 5.516442345945973, 4.319606652282435, 6.845756127344204, 7.053236096270982, + 7.681494725458877, 7.526563745782537, 8.858342186205558, 9.021889375014881, 8.209805336778926, + 9.383959972549016, 11.195848970970625, 12.561537445362251, 14.373511358982237, 15.887456275652418, + 14.491455240251522, 15.199461217404735, 16.378844807972094, 14.348345501207364, 14.961597203409823, + 15.457566696478484, 14.942769687687289, 15.721527909780036, 13.091278962257627, 14.295247001092115, + 15.296655272416865, 14.436440585461526, 13.912453188370755, 12.433861225213807, 14.061345247447989, + 13.326092951912521, 13.566974950387175, 12.96345607653163, 12.205278846692087, 11.364010452431279, + 12.120962982512733, 13.570258079014422, 14.613857418348378, 15.48868026864105, 15.421250297066777, + 16.562957844203055, 16.365666723485436, 15.848038393086913, 16.170083705874156, 16.446617416519754, + 15.024371154281331, 14.802238239296665, 13.156751496135007, 14.06168725142282, 14.94588113322983, + 14.127589669913032, 13.885898170515487, 13.692030694564533, 14.943253908206318, 14.529368596515058, + 14.661473471114782, 13.67375983483632, 13.382284458918326, 12.527287002966496, 12.767994473001014, + 12.651030056419879, 12.141617852418765, 13.606694447410502, 13.923089943159189, 14.003348672865656, + ], + }, + { + line: { + color: 'rgba(55, 128, 191, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'Trace 1', + type: 'scatter', + x: [ + '2015-01-01', + '2015-01-02', + '2015-01-03', + '2015-01-04', + '2015-01-05', + '2015-01-06', + '2015-01-07', + '2015-01-08', + '2015-01-09', + '2015-01-10', + '2015-01-11', + '2015-01-12', + '2015-01-13', + '2015-01-14', + '2015-01-15', + '2015-01-16', + '2015-01-17', + '2015-01-18', + '2015-01-19', + '2015-01-20', + '2015-01-21', + '2015-01-22', + '2015-01-23', + '2015-01-24', + '2015-01-25', + '2015-01-26', + '2015-01-27', + '2015-01-28', + '2015-01-29', + '2015-01-30', + '2015-01-31', + '2015-02-01', + '2015-02-02', + '2015-02-03', + '2015-02-04', + '2015-02-05', + '2015-02-06', + '2015-02-07', + '2015-02-08', + '2015-02-09', + '2015-02-10', + '2015-02-11', + '2015-02-12', + '2015-02-13', + '2015-02-14', + '2015-02-15', + '2015-02-16', + '2015-02-17', + '2015-02-18', + '2015-02-19', + '2015-02-20', + '2015-02-21', + '2015-02-22', + '2015-02-23', + '2015-02-24', + '2015-02-25', + '2015-02-26', + '2015-02-27', + '2015-02-28', + '2015-03-01', + '2015-03-02', + '2015-03-03', + '2015-03-04', + '2015-03-05', + '2015-03-06', + '2015-03-07', + '2015-03-08', + '2015-03-09', + '2015-03-10', + '2015-03-11', + '2015-03-12', + '2015-03-13', + '2015-03-14', + '2015-03-15', + '2015-03-16', + '2015-03-17', + '2015-03-18', + '2015-03-19', + '2015-03-20', + '2015-03-21', + '2015-03-22', + '2015-03-23', + '2015-03-24', + '2015-03-25', + '2015-03-26', + '2015-03-27', + '2015-03-28', + '2015-03-29', + '2015-03-30', + '2015-03-31', + '2015-04-01', + '2015-04-02', + '2015-04-03', + '2015-04-04', + '2015-04-05', + '2015-04-06', + '2015-04-07', + '2015-04-08', + '2015-04-09', + '2015-04-10', + ], + y: [ + -2.58404773330316, -1.9162964761259451, -1.8899798841571565, -1.098466181069551, -1.2161136413159992, + -0.9298011508867184, -2.5216450120142193, -1.5547013224314532, -3.1293219775443117, -2.7232351981528025, + -1.704449229625379, -1.2702366750752472, -1.7688923656442583, -1.9810878959630682, -1.0881359248000217, + -0.5214761704035035, -0.639866394654719, -2.258513886233204, -0.8711892253875131, -0.45426547393253053, + -2.4076676391235785, -2.2450025826137097, -2.3488062397069234, -3.2188990647525304, -2.6042445674055594, + -2.9702468803291966, -4.139691822816822, -3.9967022316870042, -4.796271521377118, -5.244924380701339, + -6.965620503609484, -6.430396926773768, -5.234457265252843, -6.181791776690352, -7.3464387119459085, + -7.085650875056526, -6.795217278293396, -6.08725142043377, -5.3416313194169875, -4.900094995211111, + -4.715363010029477, -3.6757033584677927, -5.873900613367271, -7.685787089886274, -8.833149292574403, + -9.373517123532867, -10.519456187180836, -8.012082850355387, -8.556759031756883, -8.78527769843948, + -8.801850250864483, -9.031427690493008, -9.289972806031075, -8.434541044235305, -8.543619303217836, + -9.817816201809572, -9.691704922707196, -9.172230718814316, -10.389025830978015, -9.418276522564378, + -8.844666134378604, -10.649699554950736, -11.433978738990442, -11.022214964648152, -11.156982299530265, + -12.846500605483975, -12.700459270895378, -13.701718476553872, -14.281259852458456, -13.197701892598191, + -13.444607930505104, -12.703127086621702, -12.38184968649959, -13.545422038889187, -12.062411162554307, + -12.190051993521331, -13.801739083658532, -14.198265394729127, -14.29078542197376, -13.45263060195906, + -13.130412206893606, -14.189794518505105, -12.647928857811877, -13.252175401809115, -13.526006774399674, + -13.640567463371012, -13.234252510186453, -12.313307209824384, -11.218557557877709, -10.7821947135954, + -8.89016408336461, -9.662631443485989, -6.909371824212538, -7.048202688582138, -4.971706592042745, + -4.310618310025603, -2.954237793688564, -2.0883264569176156, 1.1805740980198571, 0.5040426644599496, + ], + }, + { + line: { + color: 'rgba(50, 171, 96, 1.0)', + width: '1.3', + }, + mode: 'lines', + name: 'Trace 2', + type: 'scatter', + x: [ + '2015-01-01', + '2015-01-02', + '2015-01-03', + '2015-01-04', + '2015-01-05', + '2015-01-06', + '2015-01-07', + '2015-01-08', + '2015-01-09', + '2015-01-10', + '2015-01-11', + '2015-01-12', + '2015-01-13', + '2015-01-14', + '2015-01-15', + '2015-01-16', + '2015-01-17', + '2015-01-18', + '2015-01-19', + '2015-01-20', + '2015-01-21', + '2015-01-22', + '2015-01-23', + '2015-01-24', + '2015-01-25', + '2015-01-26', + '2015-01-27', + '2015-01-28', + '2015-01-29', + '2015-01-30', + '2015-01-31', + '2015-02-01', + '2015-02-02', + '2015-02-03', + '2015-02-04', + '2015-02-05', + '2015-02-06', + '2015-02-07', + '2015-02-08', + '2015-02-09', + '2015-02-10', + '2015-02-11', + '2015-02-12', + '2015-02-13', + '2015-02-14', + '2015-02-15', + '2015-02-16', + '2015-02-17', + '2015-02-18', + '2015-02-19', + '2015-02-20', + '2015-02-21', + '2015-02-22', + '2015-02-23', + '2015-02-24', + '2015-02-25', + '2015-02-26', + '2015-02-27', + '2015-02-28', + '2015-03-01', + '2015-03-02', + '2015-03-03', + '2015-03-04', + '2015-03-05', + '2015-03-06', + '2015-03-07', + '2015-03-08', + '2015-03-09', + '2015-03-10', + '2015-03-11', + '2015-03-12', + '2015-03-13', + '2015-03-14', + '2015-03-15', + '2015-03-16', + '2015-03-17', + '2015-03-18', + '2015-03-19', + '2015-03-20', + '2015-03-21', + '2015-03-22', + '2015-03-23', + '2015-03-24', + '2015-03-25', + '2015-03-26', + '2015-03-27', + '2015-03-28', + '2015-03-29', + '2015-03-30', + '2015-03-31', + '2015-04-01', + '2015-04-02', + '2015-04-03', + '2015-04-04', + '2015-04-05', + '2015-04-06', + '2015-04-07', + '2015-04-08', + '2015-04-09', + '2015-04-10', + ], + y: [ + 0.4661114764240781, 1.0610769506804194, 1.0620659379275244, -0.5603096501263787, -0.22966983294858567, + 1.1358334022099883, 1.8697838063194905, 1.8307593169232188, 2.6294937170536055, 1.456439760404607, + 3.571977139947352, 3.305623978930223, 4.369054542737759, 4.134928856846778, 2.525747905079978, 4.45625041538837, + 5.331621195457201, 5.01722152487662, 3.2730061427478807, 2.3895586625726164, 1.5551868349111646, + 0.9222137047406664, -0.2408476097748915, -0.7735805458656726, -0.8871954038346644, -1.9822438634492547, + -0.8886612143982666, -0.7149527896910689, -1.1377284325144619, -1.7585300048885872, -2.8117170543153254, + -2.6809842525932175, -1.6457602974924186, -2.1361202183757593, -3.506112394459107, -3.338531391597358, + -5.511057758779813, -3.5261371875358676, -4.05255557741406, -5.188415501615373, -6.032557392677557, + -5.6858700345353785, -6.667528307767753, -6.733517550988596, -7.0502984033473615, -7.574898212324232, + -7.1843491903366, -6.080355259797091, -6.398354606750326, -6.286331305269291, -7.175762338255774, + -6.6277002690607105, -6.031655281290095, -5.243102836583583, -4.612608200873672, -5.180512683218164, + -5.0321319726702916, -4.567844497333498, -3.347239903958168, -2.5263058621799597, -3.554423668680612, + -1.7466537357472816, 0.08618389027480222, 1.0223852208396356, 2.2260700096326724, 2.976731277433707, + 2.5457541264066235, 2.412842465270771, 2.1270496073872933, 4.350264423349324, 3.6000820362032346, + 3.6547717673422704, 4.29856786980301, 4.61832134099102, 5.1364308299997825, 5.647209819441451, + 6.041357011724418, 4.789997568683162, 6.041650920258338, 5.860878612223213, 5.6050673038102214, + 3.900259274681964, 2.1974477295325476, 0.979239291658772, 0.9769412141062032, 1.1215546396840912, + 1.4131546401228463, -0.5715019565360024, -0.4798030419178908, -0.19867316746947167, -1.3237063703965808, + -1.5132847802948692, -0.9466159703619573, 1.3543877997088902, 1.3745632832250965, 1.2843024279329955, + 1.1384756757773304, 1.841477239971831, 1.0626945214201182, 1.6018849370336259, + ], + }, + ], + layout: { + legend: { + font: { + color: '#4D5663', + }, + bgcolor: '#F5F6F9', + }, + xaxis1: { + title: '', + tickfont: { + color: '#4D5663', + }, + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', + }, + zerolinecolor: '#E1E5ED', + }, + yaxis1: { + title: 'Price', + tickfont: { + color: '#4D5663', + }, + zeroline: false, + gridcolor: '#E1E5ED', + titlefont: { + color: '#4D5663', + }, + tickprefix: '$', + zerolinecolor: '#E1E5ED', + }, + plot_bgcolor: '#F5F6F9', + paper_bgcolor: '#F5F6F9', + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json deleted file mode 100644 index 60d5417830333..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "type": "pie", - "marker": { - "line": { - "color": "#000000", - "width": 2 - }, - "colors": ["#FEBFB3", "#E1396C", "#96D38C", "#D0F9B1"] - }, - "textfont": { - "size": 20 - }, - "textinfo": "value", - "hoverinfo": "label+percent", - "labels": ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"], - "values": [4500, 2500, 1053, 500] - } - ], - "layout": {}, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.ts new file mode 100644 index 0000000000000..724f63c863e60 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie.ts @@ -0,0 +1,25 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const pieSchema = { + visualizer: 'plotly', + data: [ + { + type: 'pie', + marker: { + line: { + color: '#000000', + width: 2, + }, + colors: ['#FEBFB3', '#E1396C', '#96D38C', '#D0F9B1'], + }, + textfont: { + size: 20, + }, + textinfo: 'value', + hoverinfo: 'label+percent', + labels: ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'], + values: [4500, 2500, 1053, 500], + }, + ], + layout: {}, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json deleted file mode 100644 index 63ecd3b2ffa88..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.json +++ /dev/null @@ -1,79 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "link": { - "color": [ - "rgba(253, 227, 212, 0.5)", - "rgba(242, 116, 32, 1)", - "rgba(253, 227, 212, 0.5)", - "rgba(219, 233, 246, 0.5)", - "rgba(73, 148, 206, 1)", - "rgba(219, 233, 246,0.5)", - "rgba(250, 188, 19, 1)", - "rgba(250, 188, 19, 0.5)", - "rgba(250, 188, 19, 0.5)", - "rgba(127, 194, 65, 1)", - "rgba(127, 194, 65, 0.5)", - "rgba(127, 194, 65, 0.5)", - "rgba(211, 211, 211, 0.5)", - "rgba(211, 211, 211, 0.5)", - "rgba(211, 211, 211, 0.5)" - ], - "value": [20, 3, 5, 14, 1, 1, 3, 17, 2, 3, 9, 2, 5, 9, 8], - "source": [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4], - "target": [5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7] - }, - "node": { - "pad": 10, - "line": { - "color": "black", - "width": 0 - }, - "color": [ - "#F27420", - "#4994CE", - "#FABC13", - "#7FC241", - "#D3D3D3", - "#8A5988", - "#449E9E", - "#D3D3D3", - null, - null, - null, - null, - null, - null, - null - ], - "label": [ - "Remain+No – 28", - "Leave+No – 16", - "Remain+Yes – 21", - "Leave+Yes – 14", - "Didn’t vote in at least one referendum – 21", - "46 – No", - "39 – Yes", - "14 – Don’t know / would not vote" - ], - "thickness": 30 - }, - "type": "sankey", - "domain": { - "x": [0, 1], - "y": [0, 1] - }, - "orientation": "h", - "valueformat": ".0f" - } - ], - "layout": { - "font": { - "size": 10 - }, - "title": "Scottish Referendum Voters who now want Independence", - "height": 772 - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.ts new file mode 100644 index 0000000000000..3f9167b0c3ad3 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey.ts @@ -0,0 +1,80 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const sankeySchema = { + visualizer: 'plotly', + data: [ + { + link: { + color: [ + 'rgba(253, 227, 212, 0.5)', + 'rgba(242, 116, 32, 1)', + 'rgba(253, 227, 212, 0.5)', + 'rgba(219, 233, 246, 0.5)', + 'rgba(73, 148, 206, 1)', + 'rgba(219, 233, 246,0.5)', + 'rgba(250, 188, 19, 1)', + 'rgba(250, 188, 19, 0.5)', + 'rgba(250, 188, 19, 0.5)', + 'rgba(127, 194, 65, 1)', + 'rgba(127, 194, 65, 0.5)', + 'rgba(127, 194, 65, 0.5)', + 'rgba(211, 211, 211, 0.5)', + 'rgba(211, 211, 211, 0.5)', + 'rgba(211, 211, 211, 0.5)', + ], + value: [20, 3, 5, 14, 1, 1, 3, 17, 2, 3, 9, 2, 5, 9, 8], + source: [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4], + target: [5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7, 5, 6, 7], + }, + node: { + pad: 10, + line: { + color: 'black', + width: 0, + }, + color: [ + '#F27420', + '#4994CE', + '#FABC13', + '#7FC241', + '#D3D3D3', + '#8A5988', + '#449E9E', + '#D3D3D3', + null, + null, + null, + null, + null, + null, + null, + ], + label: [ + 'Remain+No – 28', + 'Leave+No – 16', + 'Remain+Yes – 21', + 'Leave+Yes – 14', + 'Didn’t vote in at least one referendum – 21', + '46 – No', + '39 – Yes', + '14 – Don’t know / would not vote', + ], + thickness: 30, + }, + type: 'sankey', + domain: { + x: [0, 1], + y: [0, 1], + }, + orientation: 'h', + valueformat: '.0f', + }, + ], + layout: { + font: { + size: 10, + }, + title: 'Scottish Referendum Voters who now want Independence', + height: 772, + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json deleted file mode 100644 index 8f3aa18704339..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sparkline.json +++ /dev/null @@ -1,911 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x1", - "yaxis": "y1", - "visible": false - }, - { - "type": "bar", - "x": [6.4], - "y": [0], - "xaxis": "x2", - "yaxis": "y2", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [12], - "y": [0], - "width": 0.2, - "xaxis": "x2", - "yaxis": "y2", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [17], - "y": [0], - "xaxis": "x2", - "yaxis": "y2", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [5, 6, 4, 8, 2, 7, 2, 1, 17, 12], - "xaxis": "x3", - "yaxis": "y3", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x4", - "yaxis": "y4", - "visible": false - }, - { - "type": "bar", - "x": [5.7], - "y": [0], - "xaxis": "x5", - "yaxis": "y5", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [8], - "y": [0], - "width": 0.2, - "xaxis": "x5", - "yaxis": "y5", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [10], - "y": [0], - "xaxis": "x5", - "yaxis": "y5", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [2, 5, 7, 8, 9, 10, 4, 1, 3, 8], - "xaxis": "x6", - "yaxis": "y6", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x7", - "yaxis": "y7", - "visible": false - }, - { - "type": "bar", - "x": [4.8], - "y": [0], - "xaxis": "x8", - "yaxis": "y8", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [8], - "y": [0], - "width": 0.2, - "xaxis": "x8", - "yaxis": "y8", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [9], - "y": [0], - "xaxis": "x8", - "yaxis": "y8", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [9, 4, 6, 3, 5, 1, 5, 2, 5, 8], - "xaxis": "x9", - "yaxis": "y9", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x10", - "yaxis": "y10", - "visible": false - }, - { - "type": "bar", - "x": [4.3], - "y": [0], - "xaxis": "x11", - "yaxis": "y11", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [6], - "y": [0], - "width": 0.2, - "xaxis": "x11", - "yaxis": "y11", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [8], - "y": [0], - "xaxis": "x11", - "yaxis": "y11", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [6, 5, 7, 3, 1, 4, 8, 2, 1, 6], - "xaxis": "x12", - "yaxis": "y12", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x13", - "yaxis": "y13", - "visible": false - }, - { - "type": "bar", - "x": [7], - "y": [0], - "xaxis": "x14", - "yaxis": "y14", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [4], - "y": [0], - "width": 0.2, - "xaxis": "x14", - "yaxis": "y14", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [13], - "y": [0], - "xaxis": "x14", - "yaxis": "y14", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [2, 1, 6, 3, 11, 7, 13, 12, 11, 4], - "xaxis": "x15", - "yaxis": "y15", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x16", - "yaxis": "y16", - "visible": false - }, - { - "type": "bar", - "x": [7.7], - "y": [0], - "xaxis": "x17", - "yaxis": "y17", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [14], - "y": [0], - "width": 0.2, - "xaxis": "x17", - "yaxis": "y17", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [14], - "y": [0], - "xaxis": "x17", - "yaxis": "y17", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [3, 4, 5, 2, 12, 8, 14, 5, 10, 14], - "xaxis": "x18", - "yaxis": "y18", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - }, - { - "type": "bar", - "x": [0], - "y": [0], - "xaxis": "x19", - "yaxis": "y19", - "visible": false - }, - { - "type": "bar", - "x": [6.7], - "y": [0], - "xaxis": "x20", - "yaxis": "y20", - "marker": { - "color": "rgb(181,221,232)" - }, - "orientation": "h" - }, - { - "type": "bar", - "x": [5], - "y": [0], - "width": 0.2, - "xaxis": "x20", - "yaxis": "y20", - "marker": { - "color": "rgb(62,151,169)" - }, - "offset": -0.1, - "orientation": "h" - }, - { - "mode": "markers", - "type": "scatter", - "x": [12], - "y": [0], - "xaxis": "x20", - "yaxis": "y20", - "marker": { - "size": 9, - "color": "rgb(5, 101, 161)", - "symbol": "diamond-tall" - } - }, - { - "type": "bar", - "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - "y": [4, 6, 8, 8, 10, 12, 2, 7, 5, 5], - "xaxis": "x21", - "yaxis": "y21", - "marker": { - "color": [ - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(181,221,232)", - "rgb(62,151,169)" - ] - } - } - ], - "layout": { - "title": "Sparkline Chart", - "xaxis1": { - "range": [0, 1], - "anchor": "y1", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis2": { - "anchor": "y2", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis3": { - "anchor": "y3", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis4": { - "range": [0, 1], - "anchor": "y4", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis5": { - "anchor": "y5", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis6": { - "anchor": "y6", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis7": { - "range": [0, 1], - "anchor": "y7", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis8": { - "anchor": "y8", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis9": { - "anchor": "y9", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis1": { - "range": [0, 1], - "anchor": "x1", - "domain": [0.857142857142857, 0.9999999999999998], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis2": { - "anchor": "x2", - "domain": [0.857142857142857, 0.9999999999999998], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis3": { - "anchor": "x3", - "domain": [0.857142857142857, 0.9999999999999998], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis4": { - "range": [0, 1], - "anchor": "x4", - "domain": [0.7142857142857142, 0.857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis5": { - "anchor": "x5", - "domain": [0.7142857142857142, 0.857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis6": { - "anchor": "x6", - "domain": [0.7142857142857142, 0.857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis7": { - "range": [0, 1], - "anchor": "x7", - "domain": [0.5714285714285714, 0.7142857142857142], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis8": { - "anchor": "x8", - "domain": [0.5714285714285714, 0.7142857142857142], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis9": { - "anchor": "x9", - "domain": [0.5714285714285714, 0.7142857142857142], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis10": { - "range": [0, 1], - "anchor": "y10", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis11": { - "anchor": "y11", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis12": { - "anchor": "y12", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis13": { - "range": [0, 1], - "anchor": "y13", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis14": { - "anchor": "y14", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis15": { - "anchor": "y15", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis16": { - "range": [0, 1], - "anchor": "y16", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis17": { - "anchor": "y17", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis18": { - "anchor": "y18", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis19": { - "range": [0, 1], - "anchor": "y19", - "domain": [0, 0.05555555555555555], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis20": { - "anchor": "y20", - "domain": [0.05555555555555555, 0.4444444444444444], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "xaxis21": { - "anchor": "y21", - "domain": [0.4444444444444444, 1], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis10": { - "range": [0, 1], - "anchor": "x10", - "domain": [0.42857142857142855, 0.5714285714285714], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis11": { - "anchor": "x11", - "domain": [0.42857142857142855, 0.5714285714285714], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis12": { - "anchor": "x12", - "domain": [0.42857142857142855, 0.5714285714285714], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis13": { - "range": [0, 1], - "anchor": "x13", - "domain": [0.2857142857142857, 0.42857142857142855], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis14": { - "anchor": "x14", - "domain": [0.2857142857142857, 0.42857142857142855], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis15": { - "anchor": "x15", - "domain": [0.2857142857142857, 0.42857142857142855], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis16": { - "range": [0, 1], - "anchor": "x16", - "domain": [0.14285714285714285, 0.2857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis17": { - "anchor": "x17", - "domain": [0.14285714285714285, 0.2857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis18": { - "anchor": "x18", - "domain": [0.14285714285714285, 0.2857142857142857], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis19": { - "range": [0, 1], - "anchor": "x19", - "domain": [0, 0.14285714285714285], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis20": { - "anchor": "x20", - "domain": [0, 0.14285714285714285], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "yaxis21": { - "anchor": "x21", - "domain": [0, 0.14285714285714285], - "showgrid": false, - "zeroline": false, - "showticklabels": false - }, - "showlegend": false, - "annotations": [ - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "adam", - "xref": "x1", - "yref": "y1", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "andrew", - "xref": "x4", - "yref": "y4", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "michael", - "xref": "x7", - "yref": "y7", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "chris", - "xref": "x10", - "yref": "y10", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "jack", - "xref": "x13", - "yref": "y13", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "robin", - "xref": "x16", - "yref": "y16", - "xanchor": "right", - "showarrow": false - }, - { - "x": 1, - "y": 0.5, - "font": { - "size": 15 - }, - "text": "alex", - "xref": "x19", - "yref": "y19", - "xanchor": "right", - "showarrow": false - }, - { - "x": 0.027777777777777776, - "y": 1.03, - "font": { - "size": 13, - "color": "#0f0f0f" - }, - "text": "name", - "xref": "paper", - "yref": "paper", - "xanchor": "center", - "yanchor": "middle", - "showarrow": false, - "textangle": 0 - }, - { - "x": 0.25, - "y": 1.03, - "font": { - "size": 13, - "color": "#0f0f0f" - }, - "text": "bullet", - "xref": "paper", - "yref": "paper", - "xanchor": "center", - "yanchor": "middle", - "showarrow": false, - "textangle": 0 - }, - { - "x": 0.7222222222222222, - "y": 1.03, - "font": { - "size": 13, - "color": "#0f0f0f" - }, - "text": "bar", - "xref": "paper", - "yref": "paper", - "xanchor": "center", - "yanchor": "middle", - "showarrow": false, - "textangle": 0 - } - ] - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json deleted file mode 100644 index 03d1923933af3..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_treemap.json +++ /dev/null @@ -1,1918 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "labelssrc": "kruthik28:82:746924", - "labels": [], - "valuessrc": "kruthik28:82:6b2b67", - "values": [], - "parentssrc": "kruthik28:82:2cf843", - "parents": [], - "branchvalues": "total" - }, - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "labelssrc": "kruthik28:82:3335c9", - "labels": ["flare"], - "valuessrc": "kruthik28:82:48df68", - "values": [956129], - "parentssrc": "kruthik28:82:84e6ba", - "parents": [""], - "branchvalues": "total" - }, - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "labelssrc": "kruthik28:82:edd325", - "labels": [ - "analytics", - "animate", - "data", - "display", - "flex", - "physics", - "query", - "scale", - "util", - "vis", - "flare" - ], - "valuessrc": "kruthik28:82:29a133", - "values": [48716, 100024, 30284, 24254, 4116, 29934, 89721, 31294, 165157, 432629, 956129], - "parentssrc": "kruthik28:82:11caae", - "parents": ["flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", "flare", ""], - "branchvalues": "total" - }, - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "labelssrc": "kruthik28:82:b1b272", - "labels": [ - "cluster", - "graph", - "optimization", - "analytics", - "Easing", - "FunctionSequence", - "interpolate", - "ISchedulable", - "Parallel", - "Pause", - "Scheduler", - "Sequence", - "Transition", - "Transitioner", - "TransitionEvent", - "Tween", - "animate", - "converters", - "DataField", - "DataSchema", - "DataSet", - "DataSource", - "DataTable", - "DataUtil", - "data", - "DirtySprite", - "LineSprite", - "RectSprite", - "TextSprite", - "display", - "FlareVis", - "flex", - "DragForce", - "GravityForce", - "IForce", - "NBodyForce", - "Particle", - "Simulation", - "Spring", - "SpringForce", - "physics", - "AggregateExpression", - "And", - "Arithmetic", - "Average", - "BinaryExpression", - "Comparison", - "CompositeExpression", - "Count", - "DateUtil", - "Distinct", - "Expression", - "ExpressionIterator", - "Fn", - "If", - "IsA", - "Literal", - "Match", - "Maximum", - "methods", - "Minimum", - "Not", - "Or", - "Query", - "Range", - "StringUtil", - "Sum", - "Variable", - "Variance", - "Xor", - "query", - "IScaleMap", - "LinearScale", - "LogScale", - "OrdinalScale", - "QuantileScale", - "QuantitativeScale", - "RootScale", - "Scale", - "ScaleType", - "TimeScale", - "scale", - "Arrays", - "Colors", - "Dates", - "Displays", - "Filter", - "Geometry", - "heap", - "IEvaluable", - "IPredicate", - "IValueProxy", - "math", - "Maths", - "Orientation", - "palette", - "Property", - "Shapes", - "Sort", - "Stats", - "Strings", - "util", - "axis", - "controls", - "data1", - "events", - "legend", - "operator", - "Visualization", - "vis", - "flare" - ], - "valuessrc": "kruthik28:82:ded383", - "values": [ - 15207, 26435, 7074, 48716, 17010, 5842, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, - 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, 4116, 4116, 1082, 1336, 319, - 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, 4141, 933, 5130, 3617, 3240, - 2732, 2039, 1214, 3748, 843, 14326, 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, - 3151, 3770, 2435, 4839, 1756, 4268, 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 10587, 335, 383, - 874, 9346, 17705, 1486, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 33886, 44639, 110583, 7011, 36003, - 183967, 16540, 432629, 956129 - ], - "parentssrc": "kruthik28:82:e903ab", - "parents": [ - "analytics", - "analytics", - "analytics", - "flare", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "flare", - "data", - "data", - "data", - "data", - "data", - "data", - "data", - "flare", - "display", - "display", - "display", - "display", - "flare", - "flex", - "flare", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "flare", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "flare", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "flare", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "util", - "flare", - "vis", - "vis", - "vis", - "vis", - "vis", - "vis", - "vis", - "flare", - "" - ], - "branchvalues": "total" - }, - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "labelssrc": "kruthik28:82:84777d", - "labels": [ - "AgglomerativeCluster", - "CommunityStructure", - "HierarchicalCluster", - "MergeEdge", - "cluster", - "BetweennessCentrality", - "LinkDistance", - "MaxFlowMinCut", - "ShortestPaths", - "SpanningTree", - "graph", - "AspectRatioBanker", - "optimization", - "analytics", - "Easing", - "FunctionSequence", - "ArrayInterpolator", - "ColorInterpolator", - "DateInterpolator", - "Interpolator", - "MatrixInterpolator", - "NumberInterpolator", - "ObjectInterpolator", - "PointInterpolator", - "RectangleInterpolator", - "interpolate", - "ISchedulable", - "Parallel", - "Pause", - "Scheduler", - "Sequence", - "Transition", - "Transitioner", - "TransitionEvent", - "Tween", - "animate", - "Converters", - "DelimitedTextConverter", - "GraphMLConverter", - "IDataConverter", - "JSONConverter", - "converters", - "DataField", - "DataSchema", - "DataSet", - "DataSource", - "DataTable", - "DataUtil", - "data", - "DirtySprite", - "LineSprite", - "RectSprite", - "TextSprite", - "display", - "FlareVis", - "flex", - "DragForce", - "GravityForce", - "IForce", - "NBodyForce", - "Particle", - "Simulation", - "Spring", - "SpringForce", - "physics", - "AggregateExpression", - "And", - "Arithmetic", - "Average", - "BinaryExpression", - "Comparison", - "CompositeExpression", - "Count", - "DateUtil", - "Distinct", - "Expression", - "ExpressionIterator", - "Fn", - "If", - "IsA", - "Literal", - "Match", - "Maximum", - "add", - "and", - "average", - "count", - "distinct", - "div", - "eq", - "fn", - "gt", - "gte", - "iff", - "isa", - "lt", - "lte", - "max", - "min", - "mod", - "mul", - "neq", - "not", - "or", - "orderby", - "range", - "select", - "stddev", - "sub", - "sum", - "update", - "variance", - "where", - "xor", - "_", - "methods", - "Minimum", - "Not", - "Or", - "Query", - "Range", - "StringUtil", - "Sum", - "Variable", - "Variance", - "Xor", - "query", - "IScaleMap", - "LinearScale", - "LogScale", - "OrdinalScale", - "QuantileScale", - "QuantitativeScale", - "RootScale", - "Scale", - "ScaleType", - "TimeScale", - "scale", - "Arrays", - "Colors", - "Dates", - "Displays", - "Filter", - "Geometry", - "FibonacciHeap", - "HeapNode", - "heap", - "IEvaluable", - "IPredicate", - "IValueProxy", - "DenseMatrix", - "IMatrix", - "SparseMatrix", - "math", - "Maths", - "Orientation", - "ColorPalette", - "Palette", - "ShapePalette", - "SizePalette", - "palette", - "Property", - "Shapes", - "Sort", - "Stats", - "Strings", - "util", - "Axes", - "Axis", - "AxisGridLine", - "AxisLabel", - "CartesianAxes", - "axis", - "AnchorControl", - "ClickControl", - "Control", - "ControlList", - "DragControl", - "ExpandControl", - "HoverControl", - "IControl", - "PanZoomControl", - "SelectionControl", - "TooltipControl", - "controls", - "Data", - "DataList", - "DataSprite", - "EdgeSprite", - "NodeSprite", - "render", - "ScaleBinding", - "Tree", - "TreeBuilder", - "data1", - "DataEvent", - "SelectionEvent", - "TooltipEvent", - "VisualizationEvent", - "events", - "Legend", - "LegendItem", - "LegendRange", - "legend", - "distortion", - "encoder", - "filter", - "IOperator", - "label", - "layout", - "Operator", - "OperatorList", - "OperatorSequence", - "OperatorSwitch", - "SortOperator", - "operator", - "Visualization", - "vis", - "flare" - ], - "valuessrc": "kruthik28:82:a956d9", - "values": [ - 3938, 3812, 6714, 743, 15207, 3534, 5731, 7840, 5914, 3416, 26435, 7074, 7074, 48716, 17010, 5842, 1983, 2047, - 1375, 8746, 2202, 1382, 1629, 1675, 2042, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, - 721, 4294, 9800, 1314, 2220, 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, - 4116, 4116, 1082, 1336, 319, 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, - 4141, 933, 5130, 3617, 3240, 2732, 2039, 1214, 3748, 843, 593, 330, 287, 277, 292, 595, 594, 460, 603, 625, 748, - 461, 597, 619, 283, 283, 591, 603, 599, 386, 323, 307, 772, 296, 363, 600, 280, 307, 335, 299, 354, 264, 14326, - 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, 3151, 3770, 2435, 4839, 1756, 4268, - 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 9354, 1233, 10587, 335, 383, 874, 3165, 2815, 3366, - 9346, 17705, 1486, 6367, 1229, 2059, 2291, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 1302, 24593, 652, 636, - 6703, 33886, 2138, 3824, 1353, 4665, 2649, 2832, 4896, 763, 5222, 7862, 8435, 44639, 20544, 19788, 10349, 3301, - 19382, 8867, 11275, 7147, 9930, 110583, 2313, 1880, 1701, 1117, 7011, 20859, 4614, 10530, 36003, 14219, 14897, - 11893, 1286, 17057, 108083, 2490, 5248, 4190, 2581, 2023, 183967, 16540, 432629, 956129 - ], - "parentssrc": "kruthik28:82:731715", - "parents": [ - "cluster", - "cluster", - "cluster", - "cluster", - "analytics", - "graph", - "graph", - "graph", - "graph", - "graph", - "analytics", - "optimization", - "analytics", - "flare", - "animate", - "animate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "flare", - "converters", - "converters", - "converters", - "converters", - "converters", - "data", - "data", - "data", - "data", - "data", - "data", - "data", - "flare", - "display", - "display", - "display", - "display", - "flare", - "flex", - "flare", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "flare", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "flare", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "flare", - "util", - "util", - "util", - "util", - "util", - "util", - "heap", - "heap", - "util", - "util", - "util", - "util", - "math", - "math", - "math", - "util", - "util", - "util", - "palette", - "palette", - "palette", - "palette", - "util", - "util", - "util", - "util", - "util", - "util", - "flare", - "axis", - "axis", - "axis", - "axis", - "axis", - "vis", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "vis", - "data1", - "data1", - "data1", - "data1", - "data1", - "data1", - "data1", - "data1", - "data1", - "vis", - "events", - "events", - "events", - "events", - "vis", - "legend", - "legend", - "legend", - "vis", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "vis", - "vis", - "flare", - "" - ], - "branchvalues": "total" - }, - { - "root": { - "color": "#f1f1f1" - }, - "type": "treemap", - "visible": true, - "labelssrc": "kruthik28:82:b6a3bf", - "labels": [ - "AgglomerativeCluster", - "CommunityStructure", - "HierarchicalCluster", - "MergeEdge", - "cluster", - "BetweennessCentrality", - "LinkDistance", - "MaxFlowMinCut", - "ShortestPaths", - "SpanningTree", - "graph", - "AspectRatioBanker", - "optimization", - "analytics", - "Easing", - "FunctionSequence", - "ArrayInterpolator", - "ColorInterpolator", - "DateInterpolator", - "Interpolator", - "MatrixInterpolator", - "NumberInterpolator", - "ObjectInterpolator", - "PointInterpolator", - "RectangleInterpolator", - "interpolate", - "ISchedulable", - "Parallel", - "Pause", - "Scheduler", - "Sequence", - "Transition", - "Transitioner", - "TransitionEvent", - "Tween", - "animate", - "Converters", - "DelimitedTextConverter", - "GraphMLConverter", - "IDataConverter", - "JSONConverter", - "converters", - "DataField", - "DataSchema", - "DataSet", - "DataSource", - "DataTable", - "DataUtil", - "data", - "DirtySprite", - "LineSprite", - "RectSprite", - "TextSprite", - "display", - "FlareVis", - "flex", - "DragForce", - "GravityForce", - "IForce", - "NBodyForce", - "Particle", - "Simulation", - "Spring", - "SpringForce", - "physics", - "AggregateExpression", - "And", - "Arithmetic", - "Average", - "BinaryExpression", - "Comparison", - "CompositeExpression", - "Count", - "DateUtil", - "Distinct", - "Expression", - "ExpressionIterator", - "Fn", - "If", - "IsA", - "Literal", - "Match", - "Maximum", - "add", - "and", - "average", - "count", - "distinct", - "div", - "eq", - "fn", - "gt", - "gte", - "iff", - "isa", - "lt", - "lte", - "max", - "min", - "mod", - "mul", - "neq", - "not", - "or", - "orderby", - "range", - "select", - "stddev", - "sub", - "sum", - "update", - "variance", - "where", - "xor", - "_", - "methods", - "Minimum", - "Not", - "Or", - "Query", - "Range", - "StringUtil", - "Sum", - "Variable", - "Variance", - "Xor", - "query", - "IScaleMap", - "LinearScale", - "LogScale", - "OrdinalScale", - "QuantileScale", - "QuantitativeScale", - "RootScale", - "Scale", - "ScaleType", - "TimeScale", - "scale", - "Arrays", - "Colors", - "Dates", - "Displays", - "Filter", - "Geometry", - "FibonacciHeap", - "HeapNode", - "heap", - "IEvaluable", - "IPredicate", - "IValueProxy", - "DenseMatrix", - "IMatrix", - "SparseMatrix", - "math", - "Maths", - "Orientation", - "ColorPalette", - "Palette", - "ShapePalette", - "SizePalette", - "palette", - "Property", - "Shapes", - "Sort", - "Stats", - "Strings", - "util", - "Axes", - "Axis", - "AxisGridLine", - "AxisLabel", - "CartesianAxes", - "axis", - "AnchorControl", - "ClickControl", - "Control", - "ControlList", - "DragControl", - "ExpandControl", - "HoverControl", - "IControl", - "PanZoomControl", - "SelectionControl", - "TooltipControl", - "controls", - "Data", - "DataList", - "DataSprite", - "EdgeSprite", - "NodeSprite", - "ArrowType", - "EdgeRenderer", - "IRenderer", - "ShapeRenderer", - "render", - "ScaleBinding", - "Tree", - "TreeBuilder", - "data1", - "DataEvent", - "SelectionEvent", - "TooltipEvent", - "VisualizationEvent", - "events", - "Legend", - "LegendItem", - "LegendRange", - "legend", - "BifocalDistortion", - "Distortion", - "FisheyeDistortion", - "distortion", - "ColorEncoder", - "Encoder", - "PropertyEncoder", - "ShapeEncoder", - "SizeEncoder", - "encoder", - "FisheyeTreeFilter", - "GraphDistanceFilter", - "VisibilityFilter", - "filter", - "IOperator", - "Labeler", - "RadialLabeler", - "StackedAreaLabeler", - "label", - "AxisLayout", - "BundledEdgeRouter", - "CircleLayout", - "CirclePackingLayout", - "DendrogramLayout", - "ForceDirectedLayout", - "IcicleTreeLayout", - "IndentedTreeLayout", - "Layout", - "NodeLinkTreeLayout", - "PieLayout", - "RadialTreeLayout", - "RandomLayout", - "StackedAreaLayout", - "TreeMapLayout", - "layout", - "Operator", - "OperatorList", - "OperatorSequence", - "OperatorSwitch", - "SortOperator", - "operator", - "Visualization", - "vis", - "flare" - ], - "valuessrc": "kruthik28:82:1bfe04", - "values": [ - 3938, 3812, 6714, 743, 15207, 3534, 5731, 7840, 5914, 3416, 26435, 7074, 7074, 48716, 17010, 5842, 1983, 2047, - 1375, 8746, 2202, 1382, 1629, 1675, 2042, 23081, 1041, 5176, 449, 5593, 5534, 9201, 19975, 1116, 6006, 100024, - 721, 4294, 9800, 1314, 2220, 18349, 1759, 2165, 586, 3331, 772, 3322, 30284, 8833, 1732, 3623, 10066, 24254, - 4116, 4116, 1082, 1336, 319, 10498, 2822, 9983, 2213, 1681, 29934, 1616, 1027, 3891, 891, 2893, 5103, 3677, 781, - 4141, 933, 5130, 3617, 3240, 2732, 2039, 1214, 3748, 843, 593, 330, 287, 277, 292, 595, 594, 460, 603, 625, 748, - 461, 597, 619, 283, 283, 591, 603, 599, 386, 323, 307, 772, 296, 363, 600, 280, 307, 335, 299, 354, 264, 14326, - 843, 1554, 970, 13896, 1594, 4130, 791, 1124, 1876, 1101, 89721, 2105, 1316, 3151, 3770, 2435, 4839, 1756, 4268, - 1821, 5833, 31294, 8258, 10001, 8217, 12555, 2324, 10993, 9354, 1233, 10587, 335, 383, 874, 3165, 2815, 3366, - 9346, 17705, 1486, 6367, 1229, 2059, 2291, 11946, 5559, 19118, 6887, 6557, 22026, 165157, 1302, 24593, 652, 636, - 6703, 33886, 2138, 3824, 1353, 4665, 2649, 2832, 4896, 763, 5222, 7862, 8435, 44639, 20544, 19788, 10349, 3301, - 19382, 698, 5569, 353, 2247, 8867, 11275, 7147, 9930, 110583, 2313, 1880, 1701, 1117, 7011, 20859, 4614, 10530, - 36003, 4461, 6314, 3444, 14219, 3179, 4060, 4138, 1690, 1830, 14897, 5219, 3165, 3509, 11893, 1286, 9956, 3899, - 3202, 17057, 6725, 3727, 9317, 12003, 4853, 8411, 4864, 3174, 7881, 12870, 2728, 12348, 870, 9121, 9191, 108083, - 2490, 5248, 4190, 2581, 2023, 183967, 16540, 432629, 956129 - ], - "parentssrc": "kruthik28:82:77b4ad", - "parents": [ - "cluster", - "cluster", - "cluster", - "cluster", - "analytics", - "graph", - "graph", - "graph", - "graph", - "graph", - "analytics", - "optimization", - "analytics", - "flare", - "animate", - "animate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "interpolate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "animate", - "flare", - "converters", - "converters", - "converters", - "converters", - "converters", - "data", - "data", - "data", - "data", - "data", - "data", - "data", - "flare", - "display", - "display", - "display", - "display", - "flare", - "flex", - "flare", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "physics", - "flare", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "methods", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "query", - "flare", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "scale", - "flare", - "util", - "util", - "util", - "util", - "util", - "util", - "heap", - "heap", - "util", - "util", - "util", - "util", - "math", - "math", - "math", - "util", - "util", - "util", - "palette", - "palette", - "palette", - "palette", - "util", - "util", - "util", - "util", - "util", - "util", - "flare", - "axis", - "axis", - "axis", - "axis", - "axis", - "vis", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "controls", - "vis", - "data1", - "data1", - "data1", - "data1", - "data1", - "render", - "render", - "render", - "render", - "data1", - "data1", - "data1", - "data1", - "vis", - "events", - "events", - "events", - "events", - "vis", - "legend", - "legend", - "legend", - "vis", - "distortion", - "distortion", - "distortion", - "operator", - "encoder", - "encoder", - "encoder", - "encoder", - "encoder", - "operator", - "filter", - "filter", - "filter", - "operator", - "operator", - "label", - "label", - "label", - "operator", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "layout", - "operator", - "operator", - "operator", - "operator", - "operator", - "operator", - "vis", - "vis", - "flare", - "" - ], - "branchvalues": "total" - } - ], - "layout": { - "width": 900, - "height": 900, - "margin": { - "b": 40, - "l": 100, - "r": 100, - "t": 0 - }, - "sliders": [ - { - "pad": { - "t": 5 - }, - "steps": [ - { - "args": [ - { - "visible": [true, false, false, false, false, false] - } - ], - "method": "update" - }, - { - "args": [ - { - "visible": [false, true, false, false, false, false] - } - ], - "method": "update" - }, - { - "args": [ - { - "visible": [false, false, true, false, false, false] - } - ], - "method": "update" - }, - { - "args": [ - { - "visible": [false, false, false, true, false, false] - } - ], - "method": "update" - }, - { - "args": [ - { - "visible": [false, false, false, false, true, false] - } - ], - "method": "update" - }, - { - "args": [ - { - "visible": [false, false, false, false, false, true] - } - ], - "method": "update" - } - ], - "active": 5, - "currentvalue": { - "prefix": "Depth: " - } - } - ], - "template": { - "data": { - "bar": [ - { - "type": "bar", - "marker": { - "line": { - "color": "#E5ECF6", - "width": 0.5 - }, - "pattern": { - "size": 10, - "fillmode": "overlay", - "solidity": 0.2 - } - }, - "error_x": { - "color": "#2a3f5f" - }, - "error_y": { - "color": "#2a3f5f" - } - } - ], - "pie": [ - { - "type": "pie", - "automargin": true - } - ], - "table": [ - { - "type": "table", - "cells": { - "fill": { - "color": "#EBF0F8" - }, - "line": { - "color": "white" - } - }, - "header": { - "fill": { - "color": "#C8D4E3" - }, - "line": { - "color": "white" - } - } - } - ], - "carpet": [ - { - "type": "carpet", - "aaxis": { - "gridcolor": "white", - "linecolor": "white", - "endlinecolor": "#2a3f5f", - "minorgridcolor": "white", - "startlinecolor": "#2a3f5f" - }, - "baxis": { - "gridcolor": "white", - "linecolor": "white", - "endlinecolor": "#2a3f5f", - "minorgridcolor": "white", - "startlinecolor": "#2a3f5f" - } - } - ], - "mesh3d": [ - { - "type": "mesh3d", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - ], - "contour": [ - { - "type": "contour", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ], - "heatmap": [ - { - "type": "heatmap", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ], - "scatter": [ - { - "type": "scatter", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "surface": [ - { - "type": "surface", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ], - "barpolar": [ - { - "type": "barpolar", - "marker": { - "line": { - "color": "#E5ECF6", - "width": 0.5 - }, - "pattern": { - "size": 10, - "fillmode": "overlay", - "solidity": 0.2 - } - } - } - ], - "heatmapgl": [ - { - "type": "heatmapgl", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ], - "histogram": [ - { - "type": "histogram", - "marker": { - "pattern": { - "size": 10, - "fillmode": "overlay", - "solidity": 0.2 - } - } - } - ], - "parcoords": [ - { - "line": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - }, - "type": "parcoords" - } - ], - "scatter3d": [ - { - "line": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - }, - "type": "scatter3d", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "scattergl": [ - { - "type": "scattergl", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "choropleth": [ - { - "type": "choropleth", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - ], - "scattergeo": [ - { - "type": "scattergeo", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "histogram2d": [ - { - "type": "histogram2d", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ], - "scatterpolar": [ - { - "type": "scatterpolar", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "contourcarpet": [ - { - "type": "contourcarpet", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - ], - "scattercarpet": [ - { - "type": "scattercarpet", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "scattermapbox": [ - { - "type": "scattermapbox", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "scatterpolargl": [ - { - "type": "scatterpolargl", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "scatterternary": [ - { - "type": "scatterternary", - "marker": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - } - } - ], - "histogram2dcontour": [ - { - "type": "histogram2dcontour", - "colorbar": { - "ticks": "", - "outlinewidth": 0 - }, - "colorscale": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - } - ] - }, - "layout": { - "geo": { - "bgcolor": "white", - "showland": true, - "lakecolor": "white", - "landcolor": "#E5ECF6", - "showlakes": true, - "subunitcolor": "white" - }, - "font": { - "color": "#2a3f5f" - }, - "polar": { - "bgcolor": "#E5ECF6", - "radialaxis": { - "ticks": "", - "gridcolor": "white", - "linecolor": "white" - }, - "angularaxis": { - "ticks": "", - "gridcolor": "white", - "linecolor": "white" - } - }, - "scene": { - "xaxis": { - "ticks": "", - "gridcolor": "white", - "gridwidth": 2, - "linecolor": "white", - "zerolinecolor": "white", - "showbackground": true, - "backgroundcolor": "#E5ECF6" - }, - "yaxis": { - "ticks": "", - "gridcolor": "white", - "gridwidth": 2, - "linecolor": "white", - "zerolinecolor": "white", - "showbackground": true, - "backgroundcolor": "#E5ECF6" - }, - "zaxis": { - "ticks": "", - "gridcolor": "white", - "gridwidth": 2, - "linecolor": "white", - "zerolinecolor": "white", - "showbackground": true, - "backgroundcolor": "#E5ECF6" - } - }, - "title": { - "x": 0.05 - }, - "xaxis": { - "ticks": "", - "title": { - "standoff": 15 - }, - "gridcolor": "white", - "linecolor": "white", - "automargin": true, - "zerolinecolor": "white", - "zerolinewidth": 2 - }, - "yaxis": { - "ticks": "", - "title": { - "standoff": 15 - }, - "gridcolor": "white", - "linecolor": "white", - "automargin": true, - "zerolinecolor": "white", - "zerolinewidth": 2 - }, - "mapbox": { - "style": "light" - }, - "ternary": { - "aaxis": { - "ticks": "", - "gridcolor": "white", - "linecolor": "white" - }, - "baxis": { - "ticks": "", - "gridcolor": "white", - "linecolor": "white" - }, - "caxis": { - "ticks": "", - "gridcolor": "white", - "linecolor": "white" - }, - "bgcolor": "#E5ECF6" - }, - "colorway": [ - "#636efa", - "#EF553B", - "#00cc96", - "#ab63fa", - "#FFA15A", - "#19d3f3", - "#FF6692", - "#B6E880", - "#FF97FF", - "#FECB52" - ], - "coloraxis": { - "colorbar": { - "ticks": "", - "outlinewidth": 0 - } - }, - "hovermode": "closest", - "colorscale": { - "diverging": [ - [0, "#8e0152"], - [0.1, "#c51b7d"], - [0.2, "#de77ae"], - [0.3, "#f1b6da"], - [0.4, "#fde0ef"], - [0.5, "#f7f7f7"], - [0.6, "#e6f5d0"], - [0.7, "#b8e186"], - [0.8, "#7fbc41"], - [0.9, "#4d9221"], - [1, "#276419"] - ], - "sequential": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ], - "sequentialminus": [ - [0, "#0d0887"], - [0.1111111111111111, "#46039f"], - [0.2222222222222222, "#7201a8"], - [0.3333333333333333, "#9c179e"], - [0.4444444444444444, "#bd3786"], - [0.5555555555555556, "#d8576b"], - [0.6666666666666666, "#ed7953"], - [0.7777777777777778, "#fb9f3a"], - [0.8888888888888888, "#fdca26"], - [1, "#f0f921"] - ] - }, - "hoverlabel": { - "align": "left" - }, - "plot_bgcolor": "#E5ECF6", - "paper_bgcolor": "white", - "shapedefaults": { - "line": { - "color": "#2a3f5f" - } - }, - "autotypenumbers": "strict", - "annotationdefaults": { - "arrowhead": 0, - "arrowcolor": "#2a3f5f", - "arrowwidth": 1 - } - } - } - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json deleted file mode 100644 index 98a7dd5c94f17..0000000000000 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.json +++ /dev/null @@ -1,79 +0,0 @@ -{ - "visualizer": "plotly", - "data": [ - { - "type": "bar", - "x": [ - 78.31759529851323, 98.09122764296625, 117.86485998741925, 137.63849233187221, 157.41212467632522, - 177.18575702077828, 196.95938936523132, 216.7330217096843, 236.5066540541373, 256.28028639859036 - ], - "y": [0, 0, 0, 33, 84, 250, 304, 221, 85, 23], - "xaxis": "x1", - "yaxis": "y1", - "marker": { - "line": { - "width": 1 - }, - "color": "#0000FF" - }, - "opacity": 1, - "orientation": "v" - }, - { - "type": "bar", - "x": [ - 86.22704823629445, 106.00068058074744, 125.77431292520045, 145.54794526965344, 165.32157761410645, - 185.09520995855948, 204.8688423030125, 224.64247464746552, 244.41610699191853, 264.18973933637153 - ], - "y": [9, 51, 177, 283, 264, 162, 47, 6, 1, 0], - "xaxis": "x1", - "yaxis": "y1", - "marker": { - "line": { - "width": 1 - }, - "color": "#007F00" - }, - "opacity": 1, - "orientation": "v" - } - ], - "layout": { - "bargap": 11.864179406671795, - "xaxis1": { - "side": "bottom", - "type": "linear", - "range": [50, 300], - "ticks": "inside", - "anchor": "y1", - "domain": [0, 1], - "mirror": "ticks", - "nticks": 6, - "showgrid": false, - "showline": true, - "tickfont": { - "size": 12 - }, - "zeroline": false - }, - "yaxis1": { - "side": "left", - "type": "linear", - "range": [0, 350], - "ticks": "inside", - "anchor": "x1", - "domain": [0, 1], - "mirror": "ticks", - "nticks": 8, - "showgrid": false, - "showline": true, - "tickfont": { - "size": 12 - }, - "zeroline": false - }, - "hovermode": "closest", - "showlegend": false - }, - "frames": [] -} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.ts b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.ts new file mode 100644 index 0000000000000..0709bb92ce8c5 --- /dev/null +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar.ts @@ -0,0 +1,80 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export const vbcSchema = { + visualizer: 'plotly', + data: [ + { + type: 'bar', + x: [ + 78.31759529851323, 98.09122764296625, 117.86485998741925, 137.63849233187221, 157.41212467632522, + 177.18575702077828, 196.95938936523132, 216.7330217096843, 236.5066540541373, 256.28028639859036, + ], + y: [0, 0, 0, 33, 84, 250, 304, 221, 85, 23], + xaxis: 'x1', + yaxis: 'y1', + marker: { + line: { + width: 1, + }, + color: '#0000FF', + }, + opacity: 1, + orientation: 'v', + }, + { + type: 'bar', + x: [ + 86.22704823629445, 106.00068058074744, 125.77431292520045, 145.54794526965344, 165.32157761410645, + 185.09520995855948, 204.8688423030125, 224.64247464746552, 244.41610699191853, 264.18973933637153, + ], + y: [9, 51, 177, 283, 264, 162, 47, 6, 1, 0], + xaxis: 'x1', + yaxis: 'y1', + marker: { + line: { + width: 1, + }, + color: '#007F00', + }, + opacity: 1, + orientation: 'v', + }, + ], + layout: { + bargap: 11.864179406671795, + xaxis1: { + side: 'bottom', + type: 'linear', + range: [50, 300], + ticks: 'inside', + anchor: 'y1', + domain: [0, 1], + mirror: 'ticks', + nticks: 6, + showgrid: false, + showline: true, + tickfont: { + size: 12, + }, + zeroline: false, + }, + yaxis1: { + side: 'left', + type: 'linear', + range: [0, 350], + ticks: 'inside', + anchor: 'x1', + domain: [0, 1], + mirror: 'ticks', + nticks: 8, + showgrid: false, + showline: true, + tickfont: { + size: 12, + }, + zeroline: false, + }, + hovermode: 'closest', + showlegend: false, + }, + frames: [], +}; diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.ts similarity index 97% rename from packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json rename to packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.ts index 4745368ea83d9..1a6dc92386bd5 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.json +++ b/packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram.ts @@ -1,11 +1,12 @@ -{ - "visualizer": "plotly", - "data": [ +/* eslint-disable @typescript-eslint/naming-convention */ +export const vbcHistogramSchema = { + visualizer: 'plotly', + data: [ { - "uid": "a58c38f5-f6a6-4b4d-8f94-07e5434e2063", - "name": "a", - "type": "histogram", - "x": [ + uid: 'a58c38f5-f6a6-4b4d-8f94-07e5434e2063', + name: 'a', + type: 'histogram', + x: [ 1.7992564437777885, 0.05779580359302183, 1.5134306451845885, 0.3914013884637312, -0.11969533034200497, -0.5139373299202106, 0.32142776505891857, 2.313965687838981, 0.1313874805632831, 3.917327494517987, 1.4773032646481492, -0.9109227115334932, 0.7599616936194599, 2.1104123608688123, 0.31412192646017323, @@ -205,25 +206,25 @@ 1.1492073021595637, 0.5148126776490796, 1.663595090677539, 1.162378928463761, 1.777697918065749, -0.38503682365552394, 1.4044113209655869, 0.4936370242935475, 2.8585799694365104, 1.222035092225946, 0.5361225813621725, 2.5564604264491617, -0.6788802948010191, 0.691920665723789, -0.5033230665192567, - 1.1463816085018617, 1.4665678739083416, 2.0561290961956233, 2.437979302184922, 0.8907419398415305 + 1.1463816085018617, 1.4665678739083416, 2.0561290961956233, 2.437979302184922, 0.8907419398415305, ], - "marker": { - "line": { - "color": "#4D5663", - "width": 1.3 + marker: { + line: { + color: '#4D5663', + width: 1.3, }, - "color": "rgba(255, 153, 51, 1.0)" + color: 'rgba(255, 153, 51, 1.0)', }, - "opacity": 0.8, - "histfunc": "count", - "histnorm": "", - "orientation": "v" + opacity: 0.8, + histfunc: 'count', + histnorm: '', + orientation: 'v', }, { - "uid": "0da57950-be2f-49b6-a792-f5f8d19f98c8", - "name": "b", - "type": "histogram", - "x": [ + uid: '0da57950-be2f-49b6-a792-f5f8d19f98c8', + name: 'b', + type: 'histogram', + x: [ 0.24717017471150998, 0.6508904445322543, -0.8150211824679685, 0.15253966266018137, -1.822991097914981, -1.2652443361175678, -0.6606912065389405, 1.6348593909273372, 0.7238370107613543, 1.7516432353985738, -0.23163828338164527, -0.8450825428744152, -0.5844768325120463, 0.8163479149135711, -0.9043241120474963, @@ -423,25 +424,25 @@ -2.8799070515793095, -1.1338904523418378, -1.100245904375071, -0.0922766913171747, 0.8567663128968322, -1.032886450676613, 1.3115985566628139, 1.1525099783356643, -0.11952472894818086, 1.2133481193955682, -1.6139892679614278, 0.5593529445952521, 0.03763293886276376, 0.2543879239408883, 1.8960846406593528, - -0.36933998733459217, 0.030822422117507603, -0.2169001686850376, 1.216550357293351, -1.2454685329663429 + -0.36933998733459217, 0.030822422117507603, -0.2169001686850376, 1.216550357293351, -1.2454685329663429, ], - "marker": { - "line": { - "color": "#4D5663", - "width": 1.3 + marker: { + line: { + color: '#4D5663', + width: 1.3, }, - "color": "rgba(55, 128, 191, 1.0)" + color: 'rgba(55, 128, 191, 1.0)', }, - "opacity": 0.8, - "histfunc": "count", - "histnorm": "", - "orientation": "v" + opacity: 0.8, + histfunc: 'count', + histnorm: '', + orientation: 'v', }, { - "uid": "bca37da1-d2b1-4232-852f-692208ab0ddc", - "name": "c", - "type": "histogram", - "x": [ + uid: 'bca37da1-d2b1-4232-852f-692208ab0ddc', + name: 'c', + type: 'histogram', + x: [ -1.3721691025663127, -0.055559399376507335, -1.5268281942267183, -2.3068542674634456, -1.634184001814117, -0.3846139031707887, -1.3079057664033003, -1.8023900909842059, -0.39685654971775064, -0.9700764293361207, -3.2252225103122267, -1.7541857307474733, 0.0726472328611778, -1.5283169557075813, -1.3593556129862843, @@ -641,62 +642,62 @@ 0.9422833588892365, -1.7508840633156373, -0.9631773346765894, 0.19871943079385535, -1.996189334079257, -1.856454869108322, 0.004550549836906059, -0.36920103382902136, -0.07208379431175183, 0.17664155826254557, -0.22336765886440946, -1.223766589561458, -1.0145754013153465, -0.12722082001247914, -0.1808245376360691, - -2.0211259056306234, -1.252720041997945, -2.1078618086082996, -0.11691765437730128, -0.39964726471277723 + -2.0211259056306234, -1.252720041997945, -2.1078618086082996, -0.11691765437730128, -0.39964726471277723, ], - "marker": { - "line": { - "color": "#4D5663", - "width": 1.3 + marker: { + line: { + color: '#4D5663', + width: 1.3, }, - "color": "rgba(50, 171, 96, 1.0)" + color: 'rgba(50, 171, 96, 1.0)', }, - "opacity": 0.8, - "histfunc": "count", - "histnorm": "", - "orientation": "v" - } + opacity: 0.8, + histfunc: 'count', + histnorm: '', + orientation: 'v', + }, ], - "layout": { - "title": { - "font": { - "color": "#4D5663" - } + layout: { + title: { + font: { + color: '#4D5663', + }, }, - "xaxis": { - "title": { - "font": { - "color": "#4D5663" + xaxis: { + title: { + font: { + color: '#4D5663', }, - "text": "" + text: '', }, - "showgrid": true, - "tickfont": { - "color": "#4D5663" + showgrid: true, + tickfont: { + color: '#4D5663', }, - "gridcolor": "#E1E5ED", - "zerolinecolor": "#E1E5ED" + gridcolor: '#E1E5ED', + zerolinecolor: '#E1E5ED', }, - "yaxis": { - "title": { - "font": { - "color": "#4D5663" + yaxis: { + title: { + font: { + color: '#4D5663', }, - "text": "" + text: '', }, - "showgrid": true, - "tickfont": { - "color": "#4D5663" + showgrid: true, + tickfont: { + color: '#4D5663', }, - "gridcolor": "#E1E5ED", - "zerolinecolor": "#E1E5ED" + gridcolor: '#E1E5ED', + zerolinecolor: '#E1E5ED', }, - "legend": { - "font": { - "color": "#4D5663" + legend: { + font: { + color: '#4D5663', }, - "bgcolor": "#F5F6F9" + bgcolor: '#F5F6F9', }, - "barmode": "overlay" + barmode: 'overlay', }, - "frames": [] -} + frames: [], +}; diff --git a/scripts/tasks/src/lint-imports.ts b/scripts/tasks/src/lint-imports.ts index ff62b66fc7738..c48c9dddc3e80 100644 --- a/scripts/tasks/src/lint-imports.ts +++ b/scripts/tasks/src/lint-imports.ts @@ -97,7 +97,16 @@ function lintImports( '@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers', '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example', '@fluentui/react-examples/lib/react/Keytip/KeytipSetup', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram', + '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar', '@fluentui/react-charting/lib/types/IDataPoint', '@fluentui/react-experiments/lib/utilities/scrolling/ScrollContainer', // Once the components using this data are promoted, the data should go into @fluentui/example-data From 71c1ed215691b43de65e50d231fa1eca96464267 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" <98592573+AtishayMsft@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:03:05 +0000 Subject: [PATCH 22/22] Update example path --- .../DeclarativeChart.Basic.Example.tsx | 24 +++++++++---------- scripts/tasks/src/lint-imports.ts | 20 ++++++++-------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index b7f9c71c6c462..394c9b084c69e 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; import { DeclarativeChart, DeclarativeChartProps } from '@fluentui/react-charting'; -import { areaSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area'; -import { donutSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut'; -import { gaugeSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge'; -import { heatmapSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap'; -import { hbcSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar'; -import { lineSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line'; -import { pieSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie'; -import { sankeySchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey'; -import { vbcHistogramSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram'; -import { vbcSchema } from '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar'; +import { areaSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_area'; +import { donutSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_donut'; +import { gaugeSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_gauge'; +import { heatmapSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_heatmap'; +import { hbcSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_horizontalbar'; +import { lineSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_line'; +import { pieSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_pie'; +import { sankeySchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_sankey'; +import { vbcHistogramSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram'; +import { vbcSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar'; interface IDeclarativeChartState { selectedChoice: string; @@ -38,8 +38,8 @@ const schemas: any[] = [ { key: 'linechart', schema: lineSchema }, { key: 'piechart', schema: pieSchema }, { key: 'sankeychart', schema: sankeySchema }, - { key: 'verticalbarchart', schema: vbcHistogramSchema }, - { key: 'verticalbar_histogramchart', schema: vbcSchema }, + { key: 'verticalbarchart', schema: vbcSchema }, + { key: 'verticalbar_histogramchart', schema: vbcHistogramSchema }, ]; const dropdownStyles = { dropdown: { width: 200 } }; diff --git a/scripts/tasks/src/lint-imports.ts b/scripts/tasks/src/lint-imports.ts index c48c9dddc3e80..ca70dd04efdd2 100644 --- a/scripts/tasks/src/lint-imports.ts +++ b/scripts/tasks/src/lint-imports.ts @@ -97,16 +97,16 @@ function lintImports( '@fluentui/react-examples/lib/react-experiments/TilesList/ExampleHelpers', '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example', '@fluentui/react-examples/lib/react/Keytip/KeytipSetup', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_gauge', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_heatmap', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_horizontalbar', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_line', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_pie', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_sankey', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram', - '@fluentui/react-examples/src/react-charting/DeclarativeChart/schema/fluent_verticalbar', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_area', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_donut', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_gauge', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_heatmap', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_horizontalbar', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_line', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_pie', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_sankey', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram', + '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar', '@fluentui/react-charting/lib/types/IDataPoint', '@fluentui/react-experiments/lib/utilities/scrolling/ScrollContainer', // Once the components using this data are promoted, the data should go into @fluentui/example-data