@fluentui/react-charts 9.0.1 → 9.0.2

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    scatterChartClassNames: function() {
+        return scatterChartClassNames;
+    },
+    useScatterChartStyles_unstable: function() {
+        return useScatterChartStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const scatterChartClassNames = {
+    tooltip: 'fui-line__tooltip',
+    root: 'fui-line__root',
+    xAxis: 'fui-line__xAxis',
+    yAxis: 'fui-line__yAxis',
+    legendContainer: 'fui-line__legendContainer',
+    hover: 'fui-line__hover',
+    calloutContentRoot: 'fui-line__calloutContentRoot',
+    calloutContentX: 'fui-line__calloutContentX',
+    calloutContentY: 'fui-line__calloutContentY',
+    descriptionMessage: 'fui-line__descriptionMessage',
+    calloutDateTimeContainer: 'fui-line__calloutDateTimeContainer',
+    calloutInfoContainer: 'fui-line__calloutInfoContainer',
+    calloutBlockContainer: 'fui-line__calloutBlockContainer',
+    calloutlegendText: 'fui-line__calloutLegendText',
+    axisTitle: 'fui-line__axisTitle',
+    chartTitle: 'fui-line__chartTitle',
+    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',
+    shapeStyles: 'fui-line__shapeStyles',
+    chartWrapper: 'fui-line__chartWrapper',
+    calloutBlockContainertoDrawShapefalse: '',
+    calloutBlockContainertoDrawShapetrue: ''
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    tooltip: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        qhf8xq: "f1euv43f",
+        fsow6f: "f17mccla",
+        Bhzewxz: "fr6rvge",
+        Bkfmm31: "f5q6cfr",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fq9zq91",
+        Bkecrkj: "f1aehjj5"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        ".f1euv43f{position:absolute;}",
+        ".f17mccla{text-align:center;}",
+        ".fr6rvge{top:var(--spacingVerticalNone);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
+        [
+            ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1aehjj5{pointer-events:none;}"
+    ]
+});
+const useScatterChartStyles_unstable = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        tooltip: (0, _react.mergeClasses)(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )
+    };
+}; //# sourceMappingURL=useScatterChartStyles.styles.js.map

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    calloutContentRoot: 'fui-line__calloutContentRoot',\n    calloutContentX: 'fui-line__calloutContentX',\n    calloutContentY: 'fui-line__calloutContentY',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    calloutDateTimeContainer: 'fui-line__calloutDateTimeContainer',\n    calloutInfoContainer: 'fui-line__calloutInfoContainer',\n    calloutBlockContainer: 'fui-line__calloutBlockContainer',\n    calloutlegendText: 'fui-line__calloutLegendText',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    calloutBlockContainertoDrawShapefalse: '',\n    calloutBlockContainertoDrawShapetrue: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"names":["scatterChartClassNames","useScatterChartStyles_unstable","tooltip","root","xAxis","yAxis","legendContainer","hover","calloutContentRoot","calloutContentX","calloutContentY","descriptionMessage","calloutDateTimeContainer","calloutInfoContainer","calloutBlockContainer","calloutlegendText","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","useStyles","__styles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,sBAAsB;eAAtBA;;IAwCAC,8BAA8B;eAA9BA;;;uBA5CoC;AAI1C,MAAMD,yBAAyB;IACtCE,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,iBAAiB;IACjBC,iBAAiB;IACjBC,oBAAoB;IACpBC,0BAA0B;IAC1BC,sBAAsB;IACtBC,uBAAuB;IACvBC,mBAAmB;IACnBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,uCAAuC;IACvCC,sCAAsC;AAC1C;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAtB,SAAA;QAAAuB,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAeX,MAAMzC,iCAAkC0C,CAAAA;IAC/C,MAAMC,aAAarB;IACnB,OAAO;QACHrB,SAAS2C,IAAAA,mBAAY,EAAC7C,uBAAuBE,OAAO,EAAE0C,WAAW1C,OAAO,CAAC,uBAAA;IAC7E;AACJ"}

package/lib-commonjs/components/Sparkline/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["Sparkline","React","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","useRtl","points","setPoints","useState","width","height","valueTextWidth","line","useMemo","d3Line","d","curve","d3curveLinear","area","d3Area","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","d3Extent","d3ScaleLinear","domain","range","d3Max","length","filter","item","drawSparkline","createElement","Fragment","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","useSparklineStyles","focusAttributes","useFocusableGroup","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["Sparkline","React","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","useRtl","points","setPoints","useState","width","height","valueTextWidth","line","useMemo","d3Line","d","curve","d3curveLinear","area","d3Area","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","d3Extent","d3ScaleLinear","domain","range","d3Max","length","filter","item","drawSparkline","createElement","Fragment","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","useSparklineStyles","focusAttributes","useFocusableGroup","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js

@@ -8,9 +8,12 @@ _export_star._(require("./DonutChart"), exports);
 _export_star._(require("./Legends"), exports);
 _export_star._(require("./LineChart"), exports);
 _export_star._(require("./VerticalBarChart"), exports);
+_export_star._(require("./GroupedVerticalBarChart"), exports);
 _export_star._(require("./CartesianChart"), exports);
 _export_star._(require("./types/index"), exports);
 _export_star._(require("./Sparkline"), exports);
+_export_star._(require("./ScatterChart"), exports);
+_export_star._(require("./GaugeChart"), exports);
 _export_star._(require("./utilities/colors"), exports);
 _export_star._(require("./Popover"), exports);
 _export_star._(require("./ResponsiveContainer"), exports);

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\n"],"names":[],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './VerticalBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './Sparkline';\nexport * from './ScatterChart';\nexport * from './GaugeChart';\nexport * from './utilities/colors';\nexport * from './Popover';\nexport * from './ResponsiveContainer';\nexport * from './DeclarativeChart';\n"],"names":[],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/types/DataPoint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataPoint.ts"],"sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\n\nexport interface Basestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface RefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface Margins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface DataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Total value of a single point bar chart.\n   */\n  total?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface ChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: HorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: LineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalBarChart {\n  y: VerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface LineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: LineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: LineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: LineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface ChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: AccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: ChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: AccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: LineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface AccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface VerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: VSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: LineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: GVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface GVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface GVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: GVDataPoint;\n}\n\nexport interface GVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: GVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutData {\n  x: number | string | Date;\n  values: CustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface Chart {\n  chartContainer: HTMLElement | null;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAsrBA;;CAEC"}
+{"version":3,"sources":["DataPoint.ts"],"sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\n\nexport interface Basestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface RefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface Margins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface DataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Total value of a single point bar chart.\n   */\n  total?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface ChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: HorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: LineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface HorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalBarChart {\n  y: VerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\ninterface BaseDataPoint {\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartDataPoint extends BaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory ChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface ScatterChartDataPoint extends BaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   */\n  x: number | Date | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Marker size of the points\n   */\n  markerSize?: number;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface LineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: LineChartDataPoint[] | ScatterChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: LineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: LineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface ChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: AccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: ChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: AccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: LineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface AccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface VSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartProps}\n */\nexport interface VerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: VSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: LineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface LineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface GroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: GVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: AccessibilityProps;\n}\n\nexport interface GVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface GVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: GVDataPoint;\n}\n\nexport interface GVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: GVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory ChartData}\n */\nexport interface CustomizedCalloutData {\n  x: number | string | Date;\n  values: CustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface Chart {\n  chartContainer: HTMLElement | null;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AA8sBA;;CAEC"}

package/lib-commonjs/utilities/utilities.js

@@ -33,6 +33,9 @@ _export(exports, {
     YAxisType: function() {
         return YAxisType;
     },
+    areArraysEqual: function() {
+        return areArraysEqual;
+    },
     calculateLongestLabelWidth: function() {
         return calculateLongestLabelWidth;
     },
@@ -81,12 +84,18 @@ _export(exports, {
     domainRangeOfDateForAreaLineVerticalBarChart: function() {
         return domainRangeOfDateForAreaLineVerticalBarChart;
     },
+    domainRangeOfDateForScatterChart: function() {
+        return domainRangeOfDateForScatterChart;
+    },
     domainRangeOfNumericForAreaChart: function() {
         return domainRangeOfNumericForAreaChart;
     },
     domainRangeOfNumericForHorizontalBarChartWithAxis: function() {
         return domainRangeOfNumericForHorizontalBarChartWithAxis;
     },
+    domainRangeOfNumericForScatterChart: function() {
+        return domainRangeOfNumericForScatterChart;
+    },
     domainRangeOfVSBCNumeric: function() {
         return domainRangeOfVSBCNumeric;
     },
@@ -189,6 +198,7 @@ var ChartTypes;
     ChartTypes[ChartTypes["GroupedVerticalBarChart"] = 4] = "GroupedVerticalBarChart";
     ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
     ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
+    ChartTypes[ChartTypes["ScatterChart"] = 7] = "ScatterChart";
 })(ChartTypes || (ChartTypes = {}));
 var XAxisTypes;
 (function(XAxisTypes) {
@@ -375,7 +385,7 @@ function createYAxis(yAxisParams, isRtl, axisData, chartType, barWidth, isIntegr
         case 6:
             return createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth);
         default:
-            return createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale);
+            return createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale);
     }
 }
 function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData, barWidth) {
@@ -400,7 +410,7 @@ function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl, axisData,
     yAxisElement ? (0, _d3selection.select)(yAxisElement).call((g)=>yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
-function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale = false) {
+function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDataset, chartType, useSecondaryYScale = false) {
     const { yMinMaxValues = {
         startValue: 0,
         endValue: 0
@@ -410,9 +420,16 @@ function createYAxisForOtherCharts(yAxisParams, isRtl, axisData, isIntegralDatas
     const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
     const finalYmin = yMinMaxValues.startValue < yMinValue ? 0 : yMinValue;
     const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset);
+    let yMin = finalYmin;
+    let yMax = domainValues[domainValues.length - 1];
+    if (chartType === 7) {
+        const yPadding = (yMax - yMin) * 0.1;
+        yMin = yMin - yPadding;
+        yMax = yMax + yPadding;
+    }
     const yAxisScale = (0, _d3scale.scaleLinear)().domain([
-        finalYmin,
-        domainValues[domainValues.length - 1]
+        yMin,
+        yMax
     ]).range([
         containerHeight - margins.bottom,
         margins.top + (eventAnnotationProps ? eventLabelHeight : 0)
@@ -501,8 +518,9 @@ function calloutData(values) {
         }
     });
     const result = Object.keys(xValToDataPoints).map((xValue)=>{
+        const originalXValue = isNaN(Number(xValue)) ? xValue : Number(xValue);
         return {
-            x: Number(xValue),
+            x: originalXValue,
             values: xValToDataPoints[xValue]
         };
     });
@@ -713,6 +731,32 @@ function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
         rEndValue
     };
 }
+function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+    let xMin = (0, _d3array.min)(points, (point)=>{
+        return (0, _d3array.min)(point.data, (item)=>item.x);
+    });
+    let xMax = (0, _d3array.max)(points, (point)=>{
+        return (0, _d3array.max)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    const xPadding = (xMax - xMin) * 0.1;
+    xMin = xMin - xPadding;
+    xMax = xMax + xPadding;
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: xMax,
+        dEndValue: xMin,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: xMin,
+        dEndValue: xMax,
+        rStartValue,
+        rEndValue
+    };
+}
 function domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, containerWidth, isRTL, shiftX) {
     const xMax = (0, _d3array.max)(points, (point)=>point.x);
     const rMin = isRTL ? margins.left : margins.left + shiftX;
@@ -809,6 +853,50 @@ function domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, is
         rEndValue
     };
 }
+function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues = []) {
+    let sDate;
+    let lDate;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sDate = (0, _d3array.min)(points, (point)=>{
+        return (0, _d3array.min)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    lDate = (0, _d3array.max)(points, (point)=>{
+        return (0, _d3array.max)(point.data, (item)=>{
+            return item.x;
+        });
+    });
+    const xPadding = (lDate.getTime() - sDate.getTime()) * 0.1;
+    sDate = new Date(sDate.getTime() - xPadding);
+    lDate = new Date(lDate.getTime() + xPadding);
+    // Need to draw graph with given small and large date
+    // (Which Involves customization of date axis tick values)
+    // That may be Either from given graph data or from prop 'tickValues' date values.
+    // So, Finding smallest and largest dates
+    sDate = (0, _d3array.min)([
+        ...tickValues,
+        sDate
+    ]);
+    lDate = (0, _d3array.max)([
+        ...tickValues,
+        lDate
+    ]);
+    const rStartValue = margins.left;
+    const rEndValue = width - margins.right;
+    return isRTL ? {
+        dStartValue: lDate,
+        dEndValue: sDate,
+        rStartValue,
+        rEndValue
+    } : {
+        dStartValue: sDate,
+        dEndValue: lDate,
+        rStartValue,
+        rEndValue
+    };
+}
 function domainRageOfVerticalNumeric(points, margins, containerWidth, isRTL, barWidth) {
     const xMax = (0, _d3array.max)(points, (point)=>point.x);
     const xMin = (0, _d3array.min)(points, (point)=>point.x);
@@ -843,6 +931,9 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 6:
                 domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
                 break;
+            case 7:
+                domainNRangeValue = domainRangeOfNumericForScatterChart(points, margins, width, isRTL);
+                break;
             default:
                 domainNRangeValue = {
                     dStartValue: 0,
@@ -859,6 +950,9 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 3:
                 domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
                 break;
+            case 7:
+                domainNRangeValue = domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues);
+                break;
             default:
                 domainNRangeValue = {
                     dStartValue: 0,
@@ -874,6 +968,7 @@ function getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisTy
             case 4:
             case 2:
             case 5:
+            case 7:
                 domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
                 break;
             default:
@@ -954,6 +1049,7 @@ function getMinMaxOfYAxis(points, chartType, yAxisType = 0) {
     switch(chartType){
         case 0:
         case 1:
+        case 7:
             minMaxValues = findNumericMinMaxOfY(points);
             break;
         case 3:
@@ -1175,6 +1271,20 @@ const formatDate = (date, useUTC)=>{
     const timeFormat = useUTC ? _d3timeformat.utcFormat : _d3timeformat.timeFormat;
     return timeFormat('%-e %b %Y, %H:%M')(date) + (useUTC ? ' GMT' : '');
 };
+function areArraysEqual(arr1, arr2) {
+    if (arr1 === arr2 || !arr1 && !arr2) {
+        return true;
+    }
+    if (!arr1 || !arr2 || arr1.length !== arr2.length) {
+        return false;
+    }
+    for(let i = 0; i < arr1.length; i++){
+        if (arr1[i] !== arr2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
 const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
 function resolveCSSVariables(chartContainer, styleRules) {
     const containerStyles = getComputedStyle(chartContainer);