@react-magma/charts 6.0.0 → 6.1.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/charts.js +1 -1
  2. package/dist/charts.js.map +1 -1
  3. package/dist/charts.modern.js +12 -12
  4. package/dist/charts.modern.js.map +1 -1
  5. package/dist/charts.modern.module.js +1 -1
  6. package/dist/charts.modern.module.js.map +1 -1
  7. package/dist/charts.umd.js +1 -1
  8. package/dist/charts.umd.js.map +1 -1
  9. package/dist/components/LineChart/ChartDataTable.d.ts +1 -0
  10. package/dist/components/LineChart/DataTable.d.ts +1 -0
  11. package/dist/components/LineChart/GraphTooltip.d.ts +1 -0
  12. package/package.json +10 -10
  13. package/src/components/LineChart/Chart.tsx +15 -14
  14. package/src/components/LineChart/GraphTooltip.tsx +6 -3
  15. package/src/components/LineChart/LineChart.stories.tsx +2 -3
  16. package/src/components/LineChart/LineChart.test.js +3 -5
  17. package/src/components/LineChart/LineChart.tsx +8 -6
  18. package/src/index.ts +1 -1
package/dist/charts.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"charts.umd.js","sources":["../src/components/LineChart/magma-charts.ts","../src/components/LineChart/GraphTooltip.tsx","../src/components/LineChart/CustomPointComponent.tsx","../src/components/LineChart/CustomAxisComponent.tsx","../src/components/LineChart/LegendButton.tsx","../src/components/LineChart/LineChart.tsx","../src/components/LineChart/ChartDataTable.tsx","../src/components/LineChart/Chart.tsx"],"sourcesContent":["// *\n// * Colors\n// *\n// const yellow200 = '#FFF59D';\n// const deepOrange600 = '#F4511E';\n// const lime300 = '#DCE775';\n// const lightGreen500 = '#8BC34A';\n// const teal700 = '#00796B';\n// const cyan900 = '#006064';\n\n// const colors = [\n// '#0085CC',\n// '#E0004D',\n// '#FA6600',\n// '#48A200',\n// '#B12FAD',\n// '#00A393',\n// ];\n\nconst colors = [\n '#00507A',\n '#8F0033',\n '#B84900',\n '#255200',\n '#711E6E',\n '#005249',\n];\n\nconst blueGrey50 = '#DFDFDF';\nconst blueGrey300 = '#8F8F8F';\nconst blueGrey700 = '#3F3F3F';\nconst grey900 = 'pink';\n\n// *\n// * Typography\n// *\nconst sansSerif = '\"Work Sans\",Helvetica,sans-serif';\nconst letterSpacing = 'normal';\nconst fontSize = 12;\n\n// *\n// * Layout\n// *\nconst padding = 8;\nconst baseProps = {\n width: 350,\n height: 350,\n padding: 50,\n};\n\n// *\n// * Labels\n// *\nconst baseLabelStyles = {\n fontFamily: sansSerif,\n fontSize,\n letterSpacing,\n padding,\n fill: blueGrey700,\n stroke: 'transparent',\n strokeWidth: 0,\n};\n\nconst centeredLabelStyles = { textAnchor: 'middle', ...baseLabelStyles };\n// *\n// * Strokes\n// *\n// const strokeDasharray = '10, 5';\nconst strokeLinecap = 'round';\nconst strokeLinejoin = 'round';\n\nexport const magmaTheme: any = {\n area: {\n style: {\n data: {\n fill: grey900,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n axis: {\n style: {\n axis: {\n fill: 'transparent',\n stroke: blueGrey300,\n strokeWidth: 1,\n strokeLinecap,\n strokeLinejoin,\n },\n axisLabel: {\n ...centeredLabelStyles,\n padding,\n stroke: 'transparent',\n },\n grid: {\n fill: 'none',\n stroke: '#dfdfdf',\n //strokeDasharray,\n strokeLinecap,\n strokeLinejoin,\n pointerEvents: 'painted',\n },\n ticks: {\n fill: 'transparent',\n size: 0,\n stroke: blueGrey300,\n strokeWidth: 0,\n strokeLinecap,\n strokeLinejoin,\n },\n tickLabels: {\n ...baseLabelStyles,\n fill: blueGrey700,\n },\n },\n ...baseProps,\n },\n polarDependentAxis: {\n style: {\n ticks: {\n fill: 'transparent',\n size: 1,\n stroke: 'transparent',\n },\n },\n },\n bar: {\n style: {\n data: {\n fill: blueGrey700,\n padding,\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n boxplot: {\n style: {\n max: { padding, stroke: blueGrey700, strokeWidth: 1 },\n maxLabels: { ...baseLabelStyles, padding: 3 },\n median: { padding, stroke: blueGrey700, strokeWidth: 1 },\n medianLabels: { ...baseLabelStyles, padding: 3 },\n min: { padding, stroke: blueGrey700, strokeWidth: 1 },\n minLabels: { ...baseLabelStyles, padding: 3 },\n q1: { padding, fill: blueGrey700 },\n q1Labels: { ...baseLabelStyles, padding: 3 },\n q3: { padding, fill: blueGrey700 },\n q3Labels: { ...baseLabelStyles, padding: 3 },\n },\n boxWidth: 20,\n ...baseProps,\n },\n candlestick: {\n style: {\n data: {\n stroke: blueGrey700,\n },\n labels: { ...baseLabelStyles, padding: 5 },\n },\n candleColors: {\n positive: '#ffffff',\n negative: blueGrey700,\n },\n ...baseProps,\n },\n chart: baseProps,\n errorbar: {\n borderWidth: 8,\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n group: {\n colorScale: colors,\n ...baseProps,\n },\n histogram: {\n style: {\n data: {\n fill: blueGrey700,\n stroke: grey900,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n legend: {\n colorScale: colors,\n gutter: 10,\n orientation: 'vertical',\n titleOrientation: 'top',\n style: {\n data: {\n type: 'circle',\n },\n labels: baseLabelStyles,\n title: { ...baseLabelStyles, padding: 5 },\n },\n },\n line: {\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n pie: {\n colorScale: colors,\n style: {\n data: {\n padding,\n stroke: blueGrey50,\n strokeWidth: 1,\n },\n labels: { ...baseLabelStyles, padding: 20 },\n },\n ...baseProps,\n },\n scatter: {\n style: {\n data: {\n fill: blueGrey700,\n opacity: 1,\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n stack: {\n colorScale: colors,\n ...baseProps,\n },\n tooltip: {\n style: { ...baseLabelStyles, padding: 0, pointerEvents: 'none' },\n flyoutStyle: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n flyoutPadding: 5,\n cornerRadius: 5,\n pointerLength: 10,\n },\n voronoi: {\n style: {\n data: {\n fill: 'transparent',\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: { ...baseLabelStyles, padding: 5, pointerEvents: 'none' },\n flyout: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n },\n ...baseProps,\n },\n};\n","import * as React from 'react';\nimport {\n StyledTooltip,\n ThemeContext,\n TooltipArrow,\n TooltipPosition,\n ThemeInterface,\n styled,\n} from 'react-magma-dom';\n\nconst StyledGraphTooltip = styled(StyledTooltip)`\n background: ${(props: any) => props.theme.colors.neutral100};\n border: 1px solid ${(props: any) => props.theme.colors.neutral300};\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n font-weight: normal;\n line-height: ${(props: any) => props.theme.typeScale.size02.lineHeight};\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n`;\n\nconst TooltipColorSwatch = styled.span`\n background: ${(props: any) => props.color};\n border: ${(props: any) => (props.color ? 'none' : '3px solid black')};\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n`;\n\nexport const GraphTooltip = (props: any) => {\n const { datum, index, showTooltip, x, y } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const linePointIndex = `${index}-${datum.index}`;\n\n return showTooltip === linePointIndex ? (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n <div>\n <TooltipColorSwatch color={theme.iterableColors[index]} />\n <span>{datum.label}</span>\n </div>\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n ) : null;\n};\n\nexport const AxisTooltip = (props: any) => {\n const { x, y, activePoints, hiddenData, dataLength } = props;\n\n const pointsIndexes = Array.from(\n Array(dataLength - 0),\n (_, i) => i + 0\n ).filter(i => !hiddenData.includes(i));\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n\n return (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n data-testid=\"axis-tooltip\"\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n {activePoints.map((point: any, i: number) => (\n <div key={i}>\n <TooltipColorSwatch\n color={theme.iterableColors[pointsIndexes[i]]}\n />\n <span>{point.label}</span>\n </div>\n ))}\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n );\n};\n","import * as React from 'react';\nimport { Point, PointProps } from 'victory';\nimport { useForceUpdate } from 'react-magma-dom';\n\nexport interface CustomScatterDataComponentInterface extends PointProps {\n lineIndex: number;\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport interface CustomPointComponentInterface {\n lineIndex: number;\n pointIndex: PointProps['index'];\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport const CustomScatterDataComponent = (\n props: CustomScatterDataComponentInterface\n) => {\n const {\n datum,\n index: pointIndex,\n lineIndex,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n return (\n <Point\n {...other}\n ariaLabel={datum.label}\n pathComponent={\n <CustomPointComponent\n lineIndex={lineIndex}\n pointIndex={pointIndex}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n role=\"button\"\n tabIndex={0}\n />\n );\n};\n\nexport const CustomPointComponent = (props: CustomPointComponentInterface) => {\n const {\n lineIndex,\n pointRefArray,\n pointIndex,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n const forceUpdate = useForceUpdate();\n const ref = React.useRef<SVGPathElement | null>(null);\n\n React.useEffect(() => {\n registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n\n forceUpdate();\n\n return () =>\n unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n }, []);\n\n return (\n <path\n ref={ref}\n data-line-index={lineIndex}\n data-point-index={pointIndex}\n {...other}\n />\n );\n};\n","import * as React from 'react';\nimport { LineSegment, LineSegmentProps } from 'victory';\n\nexport const CustomAxisComponent: React.FunctionComponent<LineSegmentProps> = ({\n events,\n ...props\n}: any) => {\n return (\n <g>\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '50px',\n stroke: 'transparent',\n }}\n />\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '1px',\n stroke: 'black',\n strokeOpacity: '0.2',\n }}\n />\n </g>\n );\n};\n","import * as React from 'react';\nimport { ThemeContext, Checkbox } from 'react-magma-dom';\n\nexport interface DataTableProps {\n name?: string;\n color?: string;\n}\n\nexport const LegendButton = React.forwardRef<HTMLButtonElement, any>(\n (props, ref) => {\n const {\n children,\n color,\n dataIndex,\n isHidden,\n onClick,\n name,\n focusCurrentLine,\n resetLineFocus,\n ...other\n } = props;\n\n function handleClick() {\n onClick && typeof onClick === 'function' && onClick(dataIndex);\n\n if (!isHidden) {\n resetLineFocus &&\n typeof resetLineFocus === 'function' &&\n resetLineFocus();\n }\n }\n\n function handleOnMouseEnterOrFocus() {\n if (!isHidden) {\n focusCurrentLine &&\n typeof focusCurrentLine === 'function' &&\n focusCurrentLine(dataIndex);\n }\n }\n\n const theme = React.useContext(ThemeContext);\n\n return (\n <div\n style={{ display: 'inline-flex' }}\n onMouseEnter={handleOnMouseEnterOrFocus}\n onMouseLeave={resetLineFocus}\n >\n <Checkbox\n checked={!isHidden}\n color={color}\n containerStyle={{\n alignItems: 'center',\n border: '0',\n boxShadow: '0 0 0',\n color: theme.colors.neutral,\n display: 'inline-flex',\n margin: '0 36px 20px 0',\n padding: '0',\n }}\n inputStyle={{\n border: color ? `none` : `2px solid ${theme.colors.neutral800}`,\n borderRadius: '4px',\n }}\n labelText={name}\n onBlur={resetLineFocus}\n onClick={handleClick}\n onFocus={handleOnMouseEnterOrFocus}\n ref={ref}\n theme={theme}\n {...other}\n />\n </div>\n );\n }\n);\n","import * as React from 'react';\nimport {\n VictoryAxis,\n VictoryAxisProps,\n VictoryChart,\n VictoryChartProps,\n VictoryLine,\n VictoryLineProps,\n VictoryScatter,\n VictoryScatterProps,\n VictoryTooltip,\n VictoryVoronoiContainer,\n} from 'victory';\n\nimport {\n I18nContext,\n ThemeContext,\n styled,\n ThemeInterface,\n I18nInterface,\n} from 'react-magma-dom';\n\nimport { magmaTheme } from './magma-charts';\nimport { AxisTooltip, GraphTooltip } from './GraphTooltip';\nimport { CustomScatterDataComponent } from './CustomPointComponent';\nimport { CustomAxisComponent } from './CustomAxisComponent';\nimport { LegendButton } from './LegendButton';\n\nexport type LineChartAxisStyle = VictoryAxisProps['style'];\nexport type DataGetterPropType = VictoryLineProps['x'];\n\nexport type ChartDataOptions =\n | {\n label: string;\n x: string | number;\n y: string | number;\n [key: string]: any;\n }\n | { label: string; [key: string]: any }\n | any;\n\nexport interface LineChartData<T> {\n name: string;\n data: T[];\n}\n\nexport interface LineChartComponentProps {\n chart?: VictoryChartProps;\n line?: VictoryLineProps;\n scatter?: VictoryScatterProps;\n xAxis?: VictoryAxisProps;\n yAxis?: VictoryAxisProps;\n}\n\n// NOTE: These props are manually copied to line-chart.mdx\nexport interface LineChartProps<T extends ChartDataOptions> {\n /**\n * Props passed to each component that makes up the line chart. See `victory` for accepted props.\n */\n componentProps?: LineChartComponentProps;\n /**\n * Data used to build the chart\n */\n data?: LineChartData<T>[];\n isMulti?: boolean;\n /**\n * @internal\n */\n lastFocusedScatterPoint: React.MutableRefObject<SVGPathElement | null>;\n /**\n * @internal\n */\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n /**\n * @internal\n */\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * @internal\n */\n tabRef: React.MutableRefObject<HTMLButtonElement | null>;\n /**\n * @internal\n */\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * Value of x key in chart data\n */\n x?: keyof T;\n /**\n * Value of y key in chart data\n */\n y?: keyof T;\n}\n\nconst LineChartContainer = styled.div`\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n`;\n\nconst VictoryChartContainer = styled.div``;\n\nconst DataLegendsContainer = styled.div`\n padding-bottom: 24px;\n`;\n\nconst DataLegendsDescription = styled.p`\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n`;\n\nexport function LineChart<T>(props: LineChartProps<T>) {\n const {\n componentProps: {\n chart = {},\n line = {},\n scatter = {},\n xAxis: {\n style: {\n axisLabel: xAxisLabel = undefined,\n tickLabels: xTickLabels = undefined,\n ...xRest\n } = {},\n ...xAxisOther\n } = { style: {} },\n yAxis: {\n style: {\n axisLabel: yAxisLabel = undefined,\n tickLabels: yTickLabels = undefined,\n ...yRest\n } = {},\n ...yAxisOther\n } = { style: {} },\n } = {},\n data = [],\n lastFocusedScatterPoint,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n tabRef,\n x,\n y,\n } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n\n const [hiddenData, setHiddenData] = React.useState<number[]>([]);\n const [width, setWidth] = React.useState<number>(800);\n const [focusedLine, setFocusedLine] = React.useState<number | null>(null);\n const [showTooltip, setShowTooltip] = React.useState<string | null>(null);\n const [showXAxisLabel, setShowXAxisLabel] = React.useState<boolean>(true);\n const [hoveringOnXAxisLine, setHoveringOnXAxisLine] =\n React.useState<boolean>(false);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const firstLegendButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n updateWidth();\n\n window.addEventListener('resize', updateWidth);\n window.addEventListener('keydown', handleEsc);\n\n return () => {\n window.removeEventListener('resize', updateWidth);\n window.removeEventListener('keydown', handleEsc);\n };\n }, []);\n\n React.useEffect(() => {\n window.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, [showTooltip]);\n\n const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);\n\n const xAxisStyles = {\n tickLabels: {\n color: '#3f3f3f',\n fontSize: 12,\n ...xTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 44,\n fontSize: 14,\n fontWeight: 'bold',\n ...xAxisLabel,\n },\n ...xRest,\n };\n\n const yAxisStyles = {\n tickLabels: {\n fontSize: 12,\n ...yTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 64,\n fontSize: 14,\n fontWeight: 'bold',\n ...yAxisLabel,\n },\n ...yRest,\n };\n\n function updateWidth() {\n containerRef.current && setWidth(containerRef.current.clientWidth);\n }\n\n function handleEsc(event: KeyboardEvent): any {\n if (event.key === 'Escape') {\n setShowTooltip(null);\n setShowXAxisLabel(false);\n }\n }\n\n function handleMouseMove() {\n !showTooltip && setShowXAxisLabel(true);\n }\n\n function setLineOpacity(index: number) {\n return focusedLine === null ? 1 : focusedLine === index ? 1 : 0.1;\n }\n\n function handleLegendClick(dataIndex: number) {\n if (hiddenData.includes(dataIndex)) {\n setHiddenData(hiddenData.filter(item => item !== dataIndex));\n } else {\n setHiddenData(hiddenData.concat([dataIndex]));\n }\n }\n\n function focusCurrentLine(dataIndex: number) {\n setFocusedLine(dataIndex);\n }\n\n function resetLineFocus() {\n setFocusedLine(null);\n }\n\n const buildLineIndexes = (\n acc: number[],\n point: React.MutableRefObject<Element>\n ) => {\n if (point.current) {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n !acc.includes(currentLineIndex) &&\n acc.push(\n parseInt(point.current.getAttribute('data-line-index') as string, 10)\n );\n }\n return acc;\n };\n\n const buildLineIndexData = (point: React.MutableRefObject<Element>) => {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n const currentPointIndex = parseInt(\n point.current.getAttribute('data-point-index') as string,\n 10\n );\n const lineIndexes = pointRefArray.current.reduce(buildLineIndexes, []);\n\n const lowestLineIndex = lineIndexes[0];\n const highestLineIndex = lineIndexes[lineIndexes.length - 1];\n\n return {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n };\n };\n\n const findPointToFocus =\n (lineIndex: number, pointIndex: number) =>\n (point: React.MutableRefObject<Element>) =>\n point.current &&\n parseInt(point.current.getAttribute('data-line-index') as string, 10) ===\n lineIndex &&\n parseInt(point.current.getAttribute('data-point-index') as string, 10) ===\n pointIndex;\n\n // eslint-disable-next-line complexity\n function handleChartContainerKeyDown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n event.preventDefault();\n lastFocusedScatterPoint.current = (\n pointRefArray.current.find(\n point => point.current === document.activeElement\n ) as React.MutableRefObject<Element>\n ).current as SVGPathElement;\n shiftKey\n ? tabRef.current && tabRef.current.focus()\n : firstLegendButtonRef.current &&\n firstLegendButtonRef.current.focus();\n break;\n }\n case 'ArrowRight': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === pointRefArray.current.length - 1\n ? (pointRefArray.current[0]?.current as HTMLButtonElement)?.focus()\n : (\n pointRefArray.current[focusedPointIndex + 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowLeft': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === 0\n ? (\n pointRefArray.current[pointRefArray.current.length - 1]\n .current as HTMLButtonElement\n ).focus()\n : (\n pointRefArray.current[focusedPointIndex - 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case lowestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(highestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextLowestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) - 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextLowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case highestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(lowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextHighestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) + 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextHighestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n }\n }\n\n function handleFirstLegendButtonKeydown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n if (\n shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <LineChartContainer ref={containerRef}>\n <VictoryChartContainer onKeyDown={handleChartContainerKeyDown}>\n <VictoryChart\n domainPadding={32}\n height={400}\n padding={{ top: 0, left: 80, right: 0, bottom: 62 }}\n theme={magmaTheme}\n width={width}\n containerComponent={\n <VictoryVoronoiContainer\n name=\"xAxisGroupLabel\"\n voronoiBlacklist={scatterNames}\n voronoiDimension=\"x\"\n labels={\n hoveringOnXAxisLine && showXAxisLabel ? () => ` ` : undefined\n }\n labelComponent={\n showXAxisLabel ? (\n <VictoryTooltip\n flyoutComponent={\n <AxisTooltip\n dataLength={data.length}\n hiddenData={hiddenData}\n />\n }\n />\n ) : undefined\n }\n role=\"presentation\"\n voronoiPadding={32}\n />\n }\n {...chart}\n >\n <VictoryAxis {...yAxisOther} dependentAxis style={yAxisStyles} />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryLine\n style={{\n data: {\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: '3',\n },\n parent: { border: theme.colors.neutral400 },\n }}\n key={`line${i}`}\n data={dataset as unknown as any[]}\n labelComponent={<></>}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...line}\n />\n )\n )}\n <VictoryAxis\n {...xAxisOther}\n style={xAxisStyles}\n gridComponent={\n <CustomAxisComponent\n events={{\n onMouseEnter: () => setHoveringOnXAxisLine(true),\n onMouseLeave: () => setHoveringOnXAxisLine(false),\n }}\n />\n }\n />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryScatter\n name={`scatter-${i}`}\n events={[\n {\n target: 'data',\n eventHandlers: {\n onBlur: () => {\n setShowXAxisLabel(true);\n setShowTooltip(null);\n return [\n {\n target: 'labels',\n mutation: () => ({ active: undefined }),\n },\n ];\n },\n onClick: () => {\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onFocus: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseEnter: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseLeave: () => {\n setShowTooltip(null);\n setShowXAxisLabel(true);\n },\n },\n },\n ]}\n style={{\n data: {\n fill: theme.colors.neutral100,\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: 2,\n },\n }}\n size={5}\n data={\n dataset.map((datum, index) => ({\n index,\n lineIndex: i,\n ...datum,\n })) as unknown as any[]\n }\n dataComponent={\n <CustomScatterDataComponent\n lineIndex={i}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n labels={() => ''}\n labelComponent={\n <VictoryTooltip\n text=\"\"\n flyoutComponent={\n <GraphTooltip index={i} showTooltip={showTooltip} />\n }\n />\n }\n key={`scatter${i}`}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...scatter}\n />\n )\n )}\n </VictoryChart>\n </VictoryChartContainer>\n\n <DataLegendsContainer>\n <DataLegendsDescription theme={theme}>\n {i18n.charts.line.dataLegendsLabel}\n </DataLegendsDescription>\n {data.map(({ name }, i) => {\n const legendButtonAriaLabel =\n i18n.charts.line.legendButtonAriaLabel.replace(/\\{name\\}/g, name);\n\n return (\n <LegendButton\n aria-label={legendButtonAriaLabel}\n color={theme.iterableColors[i]}\n dataIndex={i}\n isHidden={hiddenData.includes(i)}\n key={i}\n name={name}\n onClick={handleLegendClick}\n onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}\n focusCurrentLine={focusCurrentLine}\n ref={i === 0 ? firstLegendButtonRef : undefined}\n resetLineFocus={resetLineFocus}\n />\n );\n })}\n </DataLegendsContainer>\n </LineChartContainer>\n );\n}\n","import * as React from 'react';\nimport { VictoryAxisProps } from 'victory';\n\nimport { Card, Datagrid, Spinner } from 'react-magma-dom';\n\nexport function toCamelCase(str: string) {\n return str\n .toLowerCase()\n .replace(/[^a-z 0-9]/gi, '')\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (ltr, index) =>\n index === 0 ? ltr.toLowerCase() : ltr.toUpperCase()\n )\n .replace(/\\s+/g, '');\n}\n\nexport interface DataTableProps {\n data?: any[];\n xData: {\n keyValue?: string | number | symbol;\n label?: VictoryAxisProps['label'];\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n tickValues?: VictoryAxisProps['tickValues'];\n };\n yData: {\n keyValue?: string | number | symbol;\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n };\n}\n\nexport const ChartDataTable = (props: DataTableProps) => {\n const {\n data = [],\n xData: {\n keyValue: xKeyValue,\n label: xAxisLabel,\n tickFormat: xTickFormat,\n tickValues: xTickValues,\n },\n yData: { keyValue: yKeyValue, tickFormat: yTickFormat },\n } = props;\n const [dataForTable, setDataForTable] = React.useState({\n columns: [],\n rows: [],\n });\n\n React.useEffect(() => {\n setDataForTable(convertData());\n }, [data]);\n\n function convertData() {\n const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);\n const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {\n dataset.forEach((datum: any) => {\n const value = datum.x || (xKeyValue && datum[xKeyValue]);\n !valuesArray.includes(value) && valuesArray.push(value);\n });\n\n return valuesArray;\n }, []);\n\n let baseTableData = {\n columns:\n xTickValuesArray.length > 0\n ? [\n {\n field: xField,\n header: xAxisLabel || xKeyValue || 'X',\n isRowHeader: true,\n },\n ]\n : [],\n rows: xTickValuesArray.reduce(\n (agg: any[], tick: number, index: number) => {\n const tickValue =\n xTickValues &&\n typeof tick === 'number' &&\n xTickValues.length === xTickValuesArray.length\n ? xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(xTickValues[tick - 1])\n : xTickValues[tick - 1]\n : xTickFormat && Array.isArray(xTickFormat)\n ? xTickFormat[tick - 1]\n : xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(tick)\n : tick;\n agg.push({\n [xField]: tickValue,\n id: index,\n });\n\n return agg;\n },\n []\n ),\n };\n\n return data.reduce((tableData, datum) => {\n const { name: header, data: dataset } = datum;\n const field = toCamelCase(header);\n\n tableData.columns.push({\n field,\n header,\n });\n\n dataset.forEach((d: any, i: number) => {\n const yValue =\n d.y || d.y === 0 ? d.y : undefined || (yKeyValue && d[yKeyValue]);\n tableData.rows[i] = {\n ...tableData.rows[i],\n id: baseTableData.rows.length > 0 ? i + 1 : i,\n [field]:\n yTickFormat && typeof yTickFormat === 'function'\n ? yTickFormat(yValue)\n : yValue,\n };\n });\n\n return tableData;\n }, baseTableData);\n }\n\n return (\n <Card>\n {dataForTable.rows.length > 0 ? (\n <Datagrid\n hasPagination={false}\n columns={dataForTable.columns}\n rows={dataForTable.rows}\n />\n ) : (\n <Spinner />\n )}\n </Card>\n );\n};\n","import * as React from 'react';\nimport {\n I18nContext,\n styled,\n ThemeContext,\n useDescendants,\n} from 'react-magma-dom';\nimport { css } from '@emotion/core';\nimport { KeyboardIcon } from 'react-magma-icons';\n\nimport { LineChart, LineChartProps } from './LineChart';\nimport { ChartDataTable } from './ChartDataTable';\nimport {\n Announce,\n ButtonVariant,\n Card,\n IconButton,\n Paragraph,\n TabsContainer,\n Tabs,\n Tab,\n TabPanelsContainer,\n TabPanel,\n Tooltip,\n TypographyVisualStyle,\n} from 'react-magma-dom';\n\ninterface BaseChartProps {\n /**\n * Description of what the line chart data represents placed above the chart\n */\n description?: string;\n /**\n * @internal\n */\n testId?: string;\n /**\n * Title of the line chart\n */\n title: string;\n /**\n * Type of chart - for now just 'line' is accepted\n */\n type: string;\n}\nexport interface ChartProps<T extends any>\n extends BaseChartProps,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n LineChartProps<T> {}\n\nconst StyledTitle = styled.span`\n color: ${props => props.theme.colors.neutral};\n font-size: ${props => props.theme.typeScale.size04.fontSize};\n font-weight: 600;\n font-family: ${props => props.theme.bodyFont};\n line-height: ${props => props.theme.typeScale.size04.lineHeight};\n margin: 0 0 12px 0;\n`;\n\nconst StyledParagraph = styled(Paragraph)`\n font-size: ${props => props.theme.typeScale.size02.fontSize};\n margin: 0 0 18px 0;\n`;\n\nconst StyledTabsContainer = styled(TabsContainer)`\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};\n }\n`;\n\nconst StyledTabPanel = styled(TabPanel)`\n padding: 22px 0;\n`;\n\nconst KeyboardInstructionsCard = styled(Card)<{\n isOpen?: boolean;\n maxHeight?: string;\n width?: string;\n}>`\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ${props => (props.isOpen ? 'block' : 'none')};\n right: ${props => props.theme.spaceScale.spacing02};\n max-height: ${props =>\n props.maxHeight ? props.maxHeight : props.theme.dropdown.content.maxHeight};\n opacity: ${props => (props.isOpen ? '1' : '0')};\n outline: 0;\n overflow-y: auto;\n padding: ${props => props.theme.spaceScale.spacing05}\n ${props => props.theme.spaceScale.spacing05};\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ${props =>\n props.width &&\n css`\n white-space: normal;\n width: ${props.width};\n `}\n`;\n\nfunction BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {\n const { description, title, testId, type, ...other } = props;\n const keyboardInstructionsRef = React.useRef<HTMLButtonElement>(null);\n const lastFocusedScatterPoint = React.useRef<SVGPathElement>(null);\n const theme = React.useContext(ThemeContext);\n const i18n = React.useContext(I18nContext);\n\n const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();\n\n const [isKeyboardInstructionsOpen, setIsKeyboardInstructionsOpen] =\n React.useState<boolean>(false);\n\n function handleKeyboardInstructionsButtonBlur() {\n setIsKeyboardInstructionsOpen(false);\n }\n\n function handleKeyboardInstructionsButtonClick() {\n setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);\n }\n\n function handleKeyboardInstructionsButtonKeydown(event: { preventDefault?: any; key?: any; shiftKey?: any; }) {\n const { key, shiftKey } = event;\n\n switch (key) {\n case 'Escape': {\n setIsKeyboardInstructionsOpen(false);\n break;\n }\n case 'Tab': {\n if (\n !shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <div ref={ref}>\n <StyledTitle theme={theme}>{title}</StyledTitle>\n {description && (\n <StyledParagraph\n theme={theme}\n visualStyle={TypographyVisualStyle.bodySmall}\n >\n {description}\n </StyledParagraph>\n )}\n <StyledTabsContainer theme={theme}>\n <Tabs>\n <Tab>{i18n.charts.line.chartTabLabel}</Tab>\n <Tab>{i18n.charts.line.dataTabLabel}</Tab>\n <div\n onBlur={handleKeyboardInstructionsButtonBlur}\n style={{\n display: 'inline-block',\n marginLeft: 'auto',\n }}\n >\n <Tooltip\n content={i18n.charts.line.keyboardInstructionsTooltip}\n ref={keyboardInstructionsRef}\n >\n <IconButton\n aria-controls=\"keyboardInstructions\"\n aria-label={i18n.charts.line.keyboardInstructionsTooltip}\n aria-expanded={Boolean(isKeyboardInstructionsOpen)}\n icon={<KeyboardIcon />}\n onClick={handleKeyboardInstructionsButtonClick}\n onKeyDown={handleKeyboardInstructionsButtonKeydown}\n variant={ButtonVariant.link}\n />\n </Tooltip>\n <Announce>\n <KeyboardInstructionsCard\n id=\"keyboardInstructions\"\n isOpen={isKeyboardInstructionsOpen}\n theme={theme}\n width=\"350px\"\n >\n <Paragraph\n visualStyle={TypographyVisualStyle.headingXSmall}\n style={{ margin: '0 0 16px' }}\n >\n {i18n.charts.line.keyboardInstructionsHeader}\n </Paragraph>\n {i18n.charts.line.keyboardInstructions}\n </KeyboardInstructionsCard>\n </Announce>\n </div>\n </Tabs>\n <TabPanelsContainer>\n <StyledTabPanel theme={theme}>\n {type === 'line' && (\n <LineChart<T>\n {...other}\n lastFocusedScatterPoint={lastFocusedScatterPoint}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n tabRef={keyboardInstructionsRef}\n unregisterPoint={unregisterPoint}\n />\n )}\n </StyledTabPanel>\n <StyledTabPanel theme={theme}>\n <ChartDataTable\n data={other.data}\n xData={{\n keyValue: other.x,\n label: other.componentProps?.xAxis?.label,\n tickFormat: other.componentProps?.xAxis?.tickFormat,\n }}\n yData={{\n keyValue: other.y,\n tickFormat: other.componentProps?.yAxis?.tickFormat,\n }}\n />\n </StyledTabPanel>\n </TabPanelsContainer>\n </StyledTabsContainer>\n </div>\n );\n}\n\nexport const Chart = React.forwardRef(BaseChart) as <T>(\n props: ChartProps<T> & { ref?: React.MutableRefObject<HTMLDivElement> }\n) => ReturnType<typeof BaseChart>;\n"],"names":["width","height","padding","fontFamily","fontSize","letterSpacing","fill","blueGrey700","stroke","strokeWidth","textAnchor","baseLabelStyles","area","style","data","grey900","labels","baseProps","axis","blueGrey300","strokeLinecap","strokeLinejoin","axisLabel","centeredLabelStyles","grid","pointerEvents","ticks","size","tickLabels","polarDependentAxis","bar","boxplot","max","maxLabels","median","medianLabels","min","minLabels","q1","q1Labels","q3","q3Labels","boxWidth","candlestick","candleColors","positive","negative","chart","errorbar","borderWidth","opacity","group","colorScale","colors","histogram","legend","gutter","orientation","titleOrientation","type","title","line","pie","scatter","stack","tooltip","flyoutStyle","flyoutPadding","cornerRadius","pointerLength","voronoi","flyout","styled","StyledTooltip","props","theme","neutral100","neutral300","neutral","typeScale","size02","lineHeight","span","color","datum","index","showTooltip","x","y","React","useContext","ThemeContext","_jsx","_jsxs","StyledGraphTooltip","position","TooltipPosition","top","role","TooltipColorSwatch","iterableColors","label","TooltipArrow","activePoints","hiddenData","Array","from","dataLength","_","i","filter","includes","map","point","pointsIndexes","pointIndex","lineIndex","pointRefArray","registerPoint","unregisterPoint","other","Point","ariaLabel","pathComponent","CustomPointComponent","tabIndex","useForceUpdate","useRef","useEffect","ref","forceUpdate","events","LineSegment","strokeOpacity","forwardRef","children","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus","display","onMouseEnter","handleOnMouseEnterOrFocus","onMouseLeave","Checkbox","checked","containerStyle","alignItems","border","boxShadow","margin","inputStyle","neutral800","borderRadius","labelText","onBlur","onFocus","div","p","componentProps","_props$componentProps","xAxis","_props$componentProps5","_props$componentProps6","xAxisLabel","undefined","xTickLabels","xRest","xAxisOther","yAxis","_props$componentProps9","_props$componentProps10","yAxisLabel","yTickLabels","yRest","yAxisOther","lastFocusedScatterPoint","tabRef","I18nContext","useState","setHiddenData","setWidth","focusedLine","setFocusedLine","setShowTooltip","showXAxisLabel","setShowXAxisLabel","hoveringOnXAxisLine","setHoveringOnXAxisLine","updateWidth","window","addEventListener","handleEsc","removeEventListener","handleMouseMove","fontWeight","containerRef","current","clientWidth","event","key","item","concat","acc","parseInt","getAttribute","currentLineIndex","push","reduce","buildLineIndexes","currentPointIndex","lineIndexes","lowestLineIndex","highestLineIndex","length","shiftKey","find","preventDefault","focus","LineChartContainer","VictoryChartContainer","onKeyDown","document","activeElement","firstLegendButtonRef","findIndex","focusedPointIndex","_pointRefArray$curren","_pointRefArray$curren2","focusedPoint","buildLineIndexData","findPointToFocus","indexOf","nextLowestLineIndex","nextHighestLineIndex","VictoryChart","domainPadding","left","right","bottom","magmaTheme","containerComponent","VictoryVoronoiContainer","voronoiBlacklist","scatterNames","voronoiDimension","labelComponent","VictoryTooltip","flyoutComponent","AxisTooltip","voronoiPadding","VictoryAxis","dependentAxis","yAxisStyles","VictoryLine","setLineOpacity","parent","neutral400","dataset","xAxisStyles","gridComponent","CustomAxisComponent","VictoryScatter","target","eventHandlers","mutation","active","dataComponent","CustomScatterDataComponent","text","GraphTooltip","DataLegendsContainer","DataLegendsDescription","i18n","charts","dataLegendsLabel","legendButtonAriaLabel","replace","LegendButton","handleLegendClick","handleFirstLegendButtonKeydown","str","toLowerCase","ltr","toUpperCase","xData","xKeyValue","keyValue","xTickFormat","tickFormat","xTickValues","tickValues","yData","yKeyValue","yTickFormat","columns","rows","dataForTable","setDataForTable","toCamelCase","valuesArray","forEach","value","xTickValuesArray","field","xField","header","isRowHeader","agg","tick","isArray","tickValue","id","tableData","d","baseTableData","yValue","Card","Datagrid","hasPagination","Spinner","size04","bodyFont","Paragraph","TabsContainer","TabPanel","isOpen","spaceScale","spacing02","maxHeight","dropdown","content","spacing05","css","description","useDescendants","isKeyboardInstructionsOpen","setIsKeyboardInstructionsOpen","StyledTitle","StyledParagraph","visualStyle","TypographyVisualStyle","bodySmall","StyledTabsContainer","Tabs","Tab","chartTabLabel","dataTabLabel","marginLeft","Tooltip","keyboardInstructionsTooltip","keyboardInstructionsRef","IconButton","Boolean","icon","KeyboardIcon","prevOpen","variant","ButtonVariant","link","Announce","KeyboardInstructionsCard","headingXSmall","keyboardInstructionsHeader","keyboardInstructions","TabPanelsContainer","StyledTabPanel","LineChart","ChartDataTable","_other$componentProps","_other$componentProps2","_other$componentProps3","_other$componentProps4","_other$componentProps5","_other$componentProps6","BaseChart"],"mappings":"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"}
1
+ {"version":3,"file":"charts.umd.js","sources":["../src/components/LineChart/magma-charts.ts","../src/components/LineChart/GraphTooltip.tsx","../src/components/LineChart/CustomPointComponent.tsx","../src/components/LineChart/CustomAxisComponent.tsx","../src/components/LineChart/LegendButton.tsx","../src/components/LineChart/LineChart.tsx","../src/components/LineChart/ChartDataTable.tsx","../src/components/LineChart/Chart.tsx"],"sourcesContent":["// *\n// * Colors\n// *\n// const yellow200 = '#FFF59D';\n// const deepOrange600 = '#F4511E';\n// const lime300 = '#DCE775';\n// const lightGreen500 = '#8BC34A';\n// const teal700 = '#00796B';\n// const cyan900 = '#006064';\n\n// const colors = [\n// '#0085CC',\n// '#E0004D',\n// '#FA6600',\n// '#48A200',\n// '#B12FAD',\n// '#00A393',\n// ];\n\nconst colors = [\n '#00507A',\n '#8F0033',\n '#B84900',\n '#255200',\n '#711E6E',\n '#005249',\n];\n\nconst blueGrey50 = '#DFDFDF';\nconst blueGrey300 = '#8F8F8F';\nconst blueGrey700 = '#3F3F3F';\nconst grey900 = 'pink';\n\n// *\n// * Typography\n// *\nconst sansSerif = '\"Work Sans\",Helvetica,sans-serif';\nconst letterSpacing = 'normal';\nconst fontSize = 12;\n\n// *\n// * Layout\n// *\nconst padding = 8;\nconst baseProps = {\n width: 350,\n height: 350,\n padding: 50,\n};\n\n// *\n// * Labels\n// *\nconst baseLabelStyles = {\n fontFamily: sansSerif,\n fontSize,\n letterSpacing,\n padding,\n fill: blueGrey700,\n stroke: 'transparent',\n strokeWidth: 0,\n};\n\nconst centeredLabelStyles = { textAnchor: 'middle', ...baseLabelStyles };\n// *\n// * Strokes\n// *\n// const strokeDasharray = '10, 5';\nconst strokeLinecap = 'round';\nconst strokeLinejoin = 'round';\n\nexport const magmaTheme: any = {\n area: {\n style: {\n data: {\n fill: grey900,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n axis: {\n style: {\n axis: {\n fill: 'transparent',\n stroke: blueGrey300,\n strokeWidth: 1,\n strokeLinecap,\n strokeLinejoin,\n },\n axisLabel: {\n ...centeredLabelStyles,\n padding,\n stroke: 'transparent',\n },\n grid: {\n fill: 'none',\n stroke: '#dfdfdf',\n //strokeDasharray,\n strokeLinecap,\n strokeLinejoin,\n pointerEvents: 'painted',\n },\n ticks: {\n fill: 'transparent',\n size: 0,\n stroke: blueGrey300,\n strokeWidth: 0,\n strokeLinecap,\n strokeLinejoin,\n },\n tickLabels: {\n ...baseLabelStyles,\n fill: blueGrey700,\n },\n },\n ...baseProps,\n },\n polarDependentAxis: {\n style: {\n ticks: {\n fill: 'transparent',\n size: 1,\n stroke: 'transparent',\n },\n },\n },\n bar: {\n style: {\n data: {\n fill: blueGrey700,\n padding,\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n boxplot: {\n style: {\n max: { padding, stroke: blueGrey700, strokeWidth: 1 },\n maxLabels: { ...baseLabelStyles, padding: 3 },\n median: { padding, stroke: blueGrey700, strokeWidth: 1 },\n medianLabels: { ...baseLabelStyles, padding: 3 },\n min: { padding, stroke: blueGrey700, strokeWidth: 1 },\n minLabels: { ...baseLabelStyles, padding: 3 },\n q1: { padding, fill: blueGrey700 },\n q1Labels: { ...baseLabelStyles, padding: 3 },\n q3: { padding, fill: blueGrey700 },\n q3Labels: { ...baseLabelStyles, padding: 3 },\n },\n boxWidth: 20,\n ...baseProps,\n },\n candlestick: {\n style: {\n data: {\n stroke: blueGrey700,\n },\n labels: { ...baseLabelStyles, padding: 5 },\n },\n candleColors: {\n positive: '#ffffff',\n negative: blueGrey700,\n },\n ...baseProps,\n },\n chart: baseProps,\n errorbar: {\n borderWidth: 8,\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n group: {\n colorScale: colors,\n ...baseProps,\n },\n histogram: {\n style: {\n data: {\n fill: blueGrey700,\n stroke: grey900,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n legend: {\n colorScale: colors,\n gutter: 10,\n orientation: 'vertical',\n titleOrientation: 'top',\n style: {\n data: {\n type: 'circle',\n },\n labels: baseLabelStyles,\n title: { ...baseLabelStyles, padding: 5 },\n },\n },\n line: {\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n pie: {\n colorScale: colors,\n style: {\n data: {\n padding,\n stroke: blueGrey50,\n strokeWidth: 1,\n },\n labels: { ...baseLabelStyles, padding: 20 },\n },\n ...baseProps,\n },\n scatter: {\n style: {\n data: {\n fill: blueGrey700,\n opacity: 1,\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n stack: {\n colorScale: colors,\n ...baseProps,\n },\n tooltip: {\n style: { ...baseLabelStyles, padding: 0, pointerEvents: 'none' },\n flyoutStyle: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n flyoutPadding: 5,\n cornerRadius: 5,\n pointerLength: 10,\n },\n voronoi: {\n style: {\n data: {\n fill: 'transparent',\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: { ...baseLabelStyles, padding: 5, pointerEvents: 'none' },\n flyout: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n },\n ...baseProps,\n },\n};\n","import * as React from 'react';\nimport {\n StyledTooltip,\n ThemeContext,\n TooltipArrow,\n TooltipPosition,\n ThemeInterface,\n} from 'react-magma-dom';\n\nimport styled, { CreateStyled } from '@emotion/styled';\n\nconst typedStyled = styled as CreateStyled<ThemeInterface>;\n\nconst StyledGraphTooltip = typedStyled(StyledTooltip)`\n background: ${(props: any) => props.theme.colors.neutral100};\n border: 1px solid ${(props: any) => props.theme.colors.neutral300};\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n font-weight: normal;\n line-height: ${(props: any) => props.theme.typeScale.size02.lineHeight};\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n`;\n\nconst TooltipColorSwatch = typedStyled.span`\n background: ${(props: any) => props.color};\n border: ${(props: any) => (props.color ? 'none' : '3px solid black')};\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n`;\n\nexport const GraphTooltip = (props: any) => {\n const { datum, index, showTooltip, x, y } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const linePointIndex = `${index}-${datum.index}`;\n\n return showTooltip === linePointIndex ? (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n <div>\n <TooltipColorSwatch color={theme.iterableColors[index]} />\n <span>{datum.label}</span>\n </div>\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n ) : null;\n};\n\nexport const AxisTooltip = (props: any) => {\n const { x, y, activePoints, hiddenData, dataLength } = props;\n\n const pointsIndexes = Array.from(\n Array(dataLength - 0),\n (_, i) => i + 0\n ).filter(i => !hiddenData.includes(i));\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n\n return (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n data-testid=\"axis-tooltip\"\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n {activePoints.map((point: any, i: number) => (\n <div key={i}>\n <TooltipColorSwatch\n color={theme.iterableColors[pointsIndexes[i]]}\n />\n <span>{point.label}</span>\n </div>\n ))}\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n );\n};\n","import * as React from 'react';\nimport { Point, PointProps } from 'victory';\nimport { useForceUpdate } from 'react-magma-dom';\n\nexport interface CustomScatterDataComponentInterface extends PointProps {\n lineIndex: number;\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport interface CustomPointComponentInterface {\n lineIndex: number;\n pointIndex: PointProps['index'];\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport const CustomScatterDataComponent = (\n props: CustomScatterDataComponentInterface\n) => {\n const {\n datum,\n index: pointIndex,\n lineIndex,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n return (\n <Point\n {...other}\n ariaLabel={datum.label}\n pathComponent={\n <CustomPointComponent\n lineIndex={lineIndex}\n pointIndex={pointIndex}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n role=\"button\"\n tabIndex={0}\n />\n );\n};\n\nexport const CustomPointComponent = (props: CustomPointComponentInterface) => {\n const {\n lineIndex,\n pointRefArray,\n pointIndex,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n const forceUpdate = useForceUpdate();\n const ref = React.useRef<SVGPathElement | null>(null);\n\n React.useEffect(() => {\n registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n\n forceUpdate();\n\n return () =>\n unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n }, []);\n\n return (\n <path\n ref={ref}\n data-line-index={lineIndex}\n data-point-index={pointIndex}\n {...other}\n />\n );\n};\n","import * as React from 'react';\nimport { LineSegment, LineSegmentProps } from 'victory';\n\nexport const CustomAxisComponent: React.FunctionComponent<LineSegmentProps> = ({\n events,\n ...props\n}: any) => {\n return (\n <g>\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '50px',\n stroke: 'transparent',\n }}\n />\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '1px',\n stroke: 'black',\n strokeOpacity: '0.2',\n }}\n />\n </g>\n );\n};\n","import * as React from 'react';\nimport { ThemeContext, Checkbox } from 'react-magma-dom';\n\nexport interface DataTableProps {\n name?: string;\n color?: string;\n}\n\nexport const LegendButton = React.forwardRef<HTMLButtonElement, any>(\n (props, ref) => {\n const {\n children,\n color,\n dataIndex,\n isHidden,\n onClick,\n name,\n focusCurrentLine,\n resetLineFocus,\n ...other\n } = props;\n\n function handleClick() {\n onClick && typeof onClick === 'function' && onClick(dataIndex);\n\n if (!isHidden) {\n resetLineFocus &&\n typeof resetLineFocus === 'function' &&\n resetLineFocus();\n }\n }\n\n function handleOnMouseEnterOrFocus() {\n if (!isHidden) {\n focusCurrentLine &&\n typeof focusCurrentLine === 'function' &&\n focusCurrentLine(dataIndex);\n }\n }\n\n const theme = React.useContext(ThemeContext);\n\n return (\n <div\n style={{ display: 'inline-flex' }}\n onMouseEnter={handleOnMouseEnterOrFocus}\n onMouseLeave={resetLineFocus}\n >\n <Checkbox\n checked={!isHidden}\n color={color}\n containerStyle={{\n alignItems: 'center',\n border: '0',\n boxShadow: '0 0 0',\n color: theme.colors.neutral,\n display: 'inline-flex',\n margin: '0 36px 20px 0',\n padding: '0',\n }}\n inputStyle={{\n border: color ? `none` : `2px solid ${theme.colors.neutral800}`,\n borderRadius: '4px',\n }}\n labelText={name}\n onBlur={resetLineFocus}\n onClick={handleClick}\n onFocus={handleOnMouseEnterOrFocus}\n ref={ref}\n theme={theme}\n {...other}\n />\n </div>\n );\n }\n);\n","import * as React from 'react';\nimport {\n VictoryAxis,\n VictoryAxisProps,\n VictoryChart,\n VictoryChartProps,\n VictoryLine,\n VictoryLineProps,\n VictoryScatter,\n VictoryScatterProps,\n VictoryTooltip,\n VictoryVoronoiContainer,\n} from 'victory';\n\nimport {\n I18nContext,\n ThemeContext,\n ThemeInterface,\n I18nInterface,\n} from 'react-magma-dom';\n\nimport { magmaTheme } from './magma-charts';\nimport { AxisTooltip, GraphTooltip } from './GraphTooltip';\nimport { CustomScatterDataComponent } from './CustomPointComponent';\nimport { CustomAxisComponent } from './CustomAxisComponent';\nimport { LegendButton } from './LegendButton';\n\nimport styled, { CreateStyled } from '@emotion/styled';\nconst typedStyled = styled as CreateStyled<ThemeInterface>;\n\nexport type LineChartAxisStyle = VictoryAxisProps['style'];\nexport type DataGetterPropType = VictoryLineProps['x'];\n\nexport type ChartDataOptions =\n | {\n label: string;\n x: string | number;\n y: string | number;\n [key: string]: any;\n }\n | { label: string; [key: string]: any }\n | any;\n\nexport interface LineChartData<T> {\n name: string;\n data: T[];\n}\n\nexport interface LineChartComponentProps {\n chart?: VictoryChartProps;\n line?: VictoryLineProps;\n scatter?: VictoryScatterProps;\n xAxis?: VictoryAxisProps;\n yAxis?: VictoryAxisProps;\n}\n\n// NOTE: These props are manually copied to line-chart.mdx\nexport interface LineChartProps<T extends ChartDataOptions> {\n /**\n * Props passed to each component that makes up the line chart. See `victory` for accepted props.\n */\n componentProps?: LineChartComponentProps;\n /**\n * Data used to build the chart\n */\n data?: LineChartData<T>[];\n isMulti?: boolean;\n /**\n * @internal\n */\n lastFocusedScatterPoint: React.MutableRefObject<SVGPathElement | null>;\n /**\n * @internal\n */\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n /**\n * @internal\n */\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * @internal\n */\n tabRef: React.MutableRefObject<HTMLButtonElement | null>;\n /**\n * @internal\n */\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * Value of x key in chart data\n */\n x?: keyof T;\n /**\n * Value of y key in chart data\n */\n y?: keyof T;\n}\n\nconst LineChartContainer = typedStyled.div`\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n`;\n\nconst VictoryChartContainer = typedStyled.div``;\n\nconst DataLegendsContainer = typedStyled.div`\n padding-bottom: 24px;\n`;\n\nconst DataLegendsDescription = typedStyled.p`\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n`;\n\nexport function LineChart<T>(props: LineChartProps<T>) {\n const {\n componentProps: {\n chart = {},\n line = {},\n scatter = {},\n xAxis: {\n style: {\n axisLabel: xAxisLabel = undefined,\n tickLabels: xTickLabels = undefined,\n ...xRest\n } = {},\n ...xAxisOther\n } = { style: {} },\n yAxis: {\n style: {\n axisLabel: yAxisLabel = undefined,\n tickLabels: yTickLabels = undefined,\n ...yRest\n } = {},\n ...yAxisOther\n } = { style: {} },\n } = {},\n data = [],\n lastFocusedScatterPoint,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n tabRef,\n x,\n y,\n } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n\n const [hiddenData, setHiddenData] = React.useState<number[]>([]);\n const [width, setWidth] = React.useState<number>(800);\n const [focusedLine, setFocusedLine] = React.useState<number | null>(null);\n const [showTooltip, setShowTooltip] = React.useState<string | null>(null);\n const [showXAxisLabel, setShowXAxisLabel] = React.useState<boolean>(true);\n const [hoveringOnXAxisLine, setHoveringOnXAxisLine] =\n React.useState<boolean>(false);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const firstLegendButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n updateWidth();\n\n window.addEventListener('resize', updateWidth);\n window.addEventListener('keydown', handleEsc);\n\n return () => {\n window.removeEventListener('resize', updateWidth);\n window.removeEventListener('keydown', handleEsc);\n };\n }, []);\n\n React.useEffect(() => {\n window.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, [showTooltip]);\n\n const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);\n\n const xAxisStyles = {\n tickLabels: {\n color: '#3f3f3f',\n fontSize: 12,\n ...xTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 44,\n fontSize: 14,\n fontWeight: 'bold',\n ...xAxisLabel,\n },\n ...xRest,\n };\n\n const yAxisStyles = {\n tickLabels: {\n fontSize: 12,\n ...yTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 64,\n fontSize: 14,\n fontWeight: 'bold',\n ...yAxisLabel,\n },\n ...yRest,\n };\n\n function updateWidth() {\n containerRef.current && setWidth(containerRef.current.clientWidth);\n }\n\n function handleEsc(event: KeyboardEvent): any {\n if (event.key === 'Escape') {\n setShowTooltip(null);\n setShowXAxisLabel(false);\n }\n }\n\n function handleMouseMove() {\n !showTooltip && setShowXAxisLabel(true);\n }\n\n function setLineOpacity(index: number) {\n return focusedLine === null ? 1 : focusedLine === index ? 1 : 0.1;\n }\n\n function handleLegendClick(dataIndex: number) {\n if (hiddenData.includes(dataIndex)) {\n setHiddenData(hiddenData.filter(item => item !== dataIndex));\n } else {\n setHiddenData(hiddenData.concat([dataIndex]));\n }\n }\n\n function focusCurrentLine(dataIndex: number) {\n setFocusedLine(dataIndex);\n }\n\n function resetLineFocus() {\n setFocusedLine(null);\n }\n\n const buildLineIndexes = (\n acc: number[],\n point: React.MutableRefObject<Element>\n ) => {\n if (point.current) {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n !acc.includes(currentLineIndex) &&\n acc.push(\n parseInt(point.current.getAttribute('data-line-index') as string, 10)\n );\n }\n return acc;\n };\n\n const buildLineIndexData = (point: React.MutableRefObject<Element>) => {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n const currentPointIndex = parseInt(\n point.current.getAttribute('data-point-index') as string,\n 10\n );\n const lineIndexes = pointRefArray.current.reduce(buildLineIndexes, []);\n\n const lowestLineIndex = lineIndexes[0];\n const highestLineIndex = lineIndexes[lineIndexes.length - 1];\n\n return {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n };\n };\n\n const findPointToFocus =\n (lineIndex: number, pointIndex: number) =>\n (point: React.MutableRefObject<Element>) =>\n point.current &&\n parseInt(point.current.getAttribute('data-line-index') as string, 10) ===\n lineIndex &&\n parseInt(point.current.getAttribute('data-point-index') as string, 10) ===\n pointIndex;\n\n // eslint-disable-next-line complexity\n function handleChartContainerKeyDown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n event.preventDefault();\n lastFocusedScatterPoint.current = (\n pointRefArray.current.find(\n point => point.current === document.activeElement\n ) as React.MutableRefObject<Element>\n ).current as SVGPathElement;\n shiftKey\n ? tabRef.current && tabRef.current.focus()\n : firstLegendButtonRef.current &&\n firstLegendButtonRef.current.focus();\n break;\n }\n case 'ArrowRight': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === pointRefArray.current.length - 1\n ? (pointRefArray.current[0].current as HTMLButtonElement).focus()\n : (\n pointRefArray.current[focusedPointIndex + 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowLeft': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === 0\n ? (\n pointRefArray.current[pointRefArray.current.length - 1]\n .current as HTMLButtonElement\n ).focus()\n : (\n pointRefArray.current[focusedPointIndex - 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case lowestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(highestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextLowestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) - 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextLowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case highestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(lowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextHighestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) + 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextHighestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n }\n }\n\n function handleFirstLegendButtonKeydown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n if (\n shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <LineChartContainer ref={containerRef}>\n <VictoryChartContainer onKeyDown={handleChartContainerKeyDown}>\n <VictoryChart\n domainPadding={32}\n height={400}\n padding={{ top: 0, left: 80, right: 0, bottom: 62 }}\n theme={magmaTheme}\n width={width}\n containerComponent={\n <VictoryVoronoiContainer\n name=\"xAxisGroupLabel\"\n voronoiBlacklist={scatterNames}\n voronoiDimension=\"x\"\n labels={\n hoveringOnXAxisLine && showXAxisLabel ? () => ` ` : undefined\n }\n labelComponent={\n showXAxisLabel ? (\n <VictoryTooltip\n flyoutComponent={\n <AxisTooltip\n dataLength={data.length}\n hiddenData={hiddenData}\n />\n }\n />\n ) : undefined\n }\n role=\"presentation\"\n voronoiPadding={32}\n />\n }\n {...chart}\n >\n <VictoryAxis {...yAxisOther} dependentAxis style={yAxisStyles} />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryLine\n style={{\n data: {\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: '3',\n },\n parent: { border: theme.colors.neutral400 },\n }}\n key={`line${i}`}\n data={dataset as unknown as any[]}\n labelComponent={<></>}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...line}\n />\n )\n )}\n <VictoryAxis\n {...xAxisOther}\n style={xAxisStyles}\n gridComponent={\n <CustomAxisComponent\n events={{\n onMouseEnter: () => setHoveringOnXAxisLine(true),\n onMouseLeave: () => setHoveringOnXAxisLine(false),\n }}\n />\n }\n />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryScatter\n name={`scatter-${i}`}\n events={[\n {\n target: 'data',\n eventHandlers: {\n onBlur: () => {\n setShowXAxisLabel(true);\n setShowTooltip(null);\n return [\n {\n target: 'labels',\n mutation: () => ({ active: undefined }),\n },\n ];\n },\n onClick: () => {\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onFocus: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseEnter: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseLeave: () => {\n setShowTooltip(null);\n setShowXAxisLabel(true);\n },\n },\n },\n ]}\n style={{\n data: {\n fill: theme.colors.neutral100,\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: 2,\n },\n }}\n size={5}\n data={\n dataset.map((datum, index) => ({\n index,\n lineIndex: i,\n ...datum,\n })) as unknown as any[]\n }\n dataComponent={\n <CustomScatterDataComponent\n lineIndex={i}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n labels={() => ''}\n labelComponent={\n <VictoryTooltip\n text=\"\"\n flyoutComponent={\n <GraphTooltip index={i} showTooltip={showTooltip} />\n }\n />\n }\n key={`scatter${i}`}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...scatter}\n />\n )\n )}\n </VictoryChart>\n </VictoryChartContainer>\n\n <DataLegendsContainer>\n <DataLegendsDescription theme={theme}>\n {i18n.charts.line.dataLegendsLabel}\n </DataLegendsDescription>\n {data.map(({ name }, i) => {\n const legendButtonAriaLabel =\n i18n.charts.line.legendButtonAriaLabel.replace(/\\{name\\}/g, name);\n\n return (\n <LegendButton\n aria-label={legendButtonAriaLabel}\n color={theme.iterableColors[i]}\n dataIndex={i}\n isHidden={hiddenData.includes(i)}\n key={i}\n name={name}\n onClick={handleLegendClick}\n onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}\n focusCurrentLine={focusCurrentLine}\n ref={i === 0 ? firstLegendButtonRef : undefined}\n resetLineFocus={resetLineFocus}\n />\n );\n })}\n </DataLegendsContainer>\n </LineChartContainer>\n );\n}\n","import * as React from 'react';\nimport { VictoryAxisProps } from 'victory';\n\nimport { Card, Datagrid, Spinner } from 'react-magma-dom';\n\nexport function toCamelCase(str: string) {\n return str\n .toLowerCase()\n .replace(/[^a-z 0-9]/gi, '')\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (ltr, index) =>\n index === 0 ? ltr.toLowerCase() : ltr.toUpperCase()\n )\n .replace(/\\s+/g, '');\n}\n\nexport interface DataTableProps {\n data?: any[];\n xData: {\n keyValue?: string | number | symbol;\n label?: VictoryAxisProps['label'];\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n tickValues?: VictoryAxisProps['tickValues'];\n };\n yData: {\n keyValue?: string | number | symbol;\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n };\n}\n\nexport const ChartDataTable = (props: DataTableProps) => {\n const {\n data = [],\n xData: {\n keyValue: xKeyValue,\n label: xAxisLabel,\n tickFormat: xTickFormat,\n tickValues: xTickValues,\n },\n yData: { keyValue: yKeyValue, tickFormat: yTickFormat },\n } = props;\n const [dataForTable, setDataForTable] = React.useState({\n columns: [],\n rows: [],\n });\n\n React.useEffect(() => {\n setDataForTable(convertData());\n }, [data]);\n\n function convertData() {\n const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);\n const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {\n dataset.forEach((datum: any) => {\n const value = datum.x || (xKeyValue && datum[xKeyValue]);\n !valuesArray.includes(value) && valuesArray.push(value);\n });\n\n return valuesArray;\n }, []);\n\n let baseTableData = {\n columns:\n xTickValuesArray.length > 0\n ? [\n {\n field: xField,\n header: xAxisLabel || xKeyValue || 'X',\n isRowHeader: true,\n },\n ]\n : [],\n rows: xTickValuesArray.reduce(\n (agg: any[], tick: number, index: number) => {\n const tickValue =\n xTickValues &&\n typeof tick === 'number' &&\n xTickValues.length === xTickValuesArray.length\n ? xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(xTickValues[tick - 1])\n : xTickValues[tick - 1]\n : xTickFormat && Array.isArray(xTickFormat)\n ? xTickFormat[tick - 1]\n : xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(tick)\n : tick;\n agg.push({\n [xField]: tickValue,\n id: index,\n });\n\n return agg;\n },\n []\n ),\n };\n\n return data.reduce((tableData, datum) => {\n const { name: header, data: dataset } = datum;\n const field = toCamelCase(header);\n\n tableData.columns.push({\n field,\n header,\n });\n\n dataset.forEach((d: any, i: number) => {\n const yValue =\n d.y || d.y === 0 ? d.y : undefined || (yKeyValue && d[yKeyValue]);\n tableData.rows[i] = {\n ...tableData.rows[i],\n id: baseTableData.rows.length > 0 ? i + 1 : i,\n [field]:\n yTickFormat && typeof yTickFormat === 'function'\n ? yTickFormat(yValue)\n : yValue,\n };\n });\n\n return tableData;\n }, baseTableData);\n }\n\n return (\n <Card>\n {dataForTable.rows.length > 0 ? (\n <Datagrid\n hasPagination={false}\n columns={dataForTable.columns}\n rows={dataForTable.rows}\n />\n ) : (\n <Spinner />\n )}\n </Card>\n );\n};\n","import * as React from 'react';\nimport { css } from '@emotion/core';\nimport { KeyboardIcon } from 'react-magma-icons';\n\nimport { LineChart, LineChartProps } from './LineChart';\nimport { ChartDataTable } from './ChartDataTable';\nimport {\n Announce,\n ButtonVariant,\n Card,\n I18nContext,\n IconButton,\n Paragraph,\n Tab,\n TabPanel,\n TabPanelsContainer,\n Tabs,\n TabsContainer,\n ThemeContext,\n ThemeInterface,\n Tooltip,\n TypographyVisualStyle,\n useDescendants,\n} from 'react-magma-dom';\n\nimport styled, { CreateStyled } from '@emotion/styled';\nconst typedStyled = styled as CreateStyled<ThemeInterface>;\n\ninterface BaseChartProps {\n /**\n * Description of what the line chart data represents placed above the chart\n */\n description?: string;\n /**\n * @internal\n */\n testId?: string;\n /**\n * Title of the line chart\n */\n title: string;\n /**\n * Type of chart - for now just 'line' is accepted\n */\n type: string;\n}\nexport interface ChartProps<T extends any>\n extends BaseChartProps,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n LineChartProps<T> {}\n\nconst StyledTitle = typedStyled.span`\n color: ${props => props.theme.colors.neutral};\n font-size: ${props => props.theme.typeScale.size04.fontSize};\n font-weight: 600;\n font-family: ${props => props.theme.bodyFont};\n line-height: ${props => props.theme.typeScale.size04.lineHeight};\n margin: 0 0 12px 0;\n`;\n\nconst StyledParagraph = typedStyled(Paragraph)`\n font-size: ${props => props.theme.typeScale.size02.fontSize};\n margin: 0 0 18px 0;\n`;\n\nconst StyledTabsContainer = typedStyled(TabsContainer)`\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};\n }\n`;\n\nconst StyledTabPanel = typedStyled(TabPanel)`\n padding: 22px 0;\n`;\n\nconst KeyboardInstructionsCard = typedStyled(Card)<{\n isOpen?: boolean;\n maxHeight?: string;\n width?: string;\n}>`\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ${props => (props.isOpen ? 'block' : 'none')};\n right: ${props => props.theme.spaceScale.spacing02};\n max-height: ${props =>\n props.maxHeight ? props.maxHeight : props.theme.dropdown.content.maxHeight};\n opacity: ${props => (props.isOpen ? '1' : '0')};\n outline: 0;\n overflow-y: auto;\n padding: ${props => props.theme.spaceScale.spacing05}\n ${props => props.theme.spaceScale.spacing05};\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ${props =>\n props.width &&\n css`\n white-space: normal;\n width: ${props.width};\n `}\n`;\n\nfunction BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {\n const { description, title, testId, type, ...other } = props;\n const keyboardInstructionsRef = React.useRef<HTMLButtonElement>(null);\n const lastFocusedScatterPoint = React.useRef<SVGPathElement>(null);\n const theme = React.useContext(ThemeContext);\n const i18n = React.useContext(I18nContext);\n\n const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();\n\n const [isKeyboardInstructionsOpen, setIsKeyboardInstructionsOpen] =\n React.useState<boolean>(false);\n\n function handleKeyboardInstructionsButtonBlur() {\n setIsKeyboardInstructionsOpen(false);\n }\n\n function handleKeyboardInstructionsButtonClick() {\n setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);\n }\n\n function handleKeyboardInstructionsButtonKeydown(event: { preventDefault?: any; key?: any; shiftKey?: any; }) {\n const { key, shiftKey } = event;\n\n switch (key) {\n case 'Escape': {\n setIsKeyboardInstructionsOpen(false);\n break;\n }\n case 'Tab': {\n if (\n !shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <div ref={ref}>\n <StyledTitle theme={theme}>{title}</StyledTitle>\n {description && (\n <StyledParagraph\n theme={theme}\n visualStyle={TypographyVisualStyle.bodySmall}\n >\n {description}\n </StyledParagraph>\n )}\n <StyledTabsContainer theme={theme}>\n <Tabs>\n <Tab>{i18n.charts.line.chartTabLabel}</Tab>\n <Tab>{i18n.charts.line.dataTabLabel}</Tab>\n <div\n onBlur={handleKeyboardInstructionsButtonBlur}\n style={{\n display: 'inline-block',\n marginLeft: 'auto',\n }}\n >\n <Tooltip\n content={i18n.charts.line.keyboardInstructionsTooltip}\n ref={keyboardInstructionsRef}\n >\n <IconButton\n aria-controls=\"keyboardInstructions\"\n aria-label={i18n.charts.line.keyboardInstructionsTooltip}\n aria-expanded={Boolean(isKeyboardInstructionsOpen)}\n icon={<KeyboardIcon />}\n onClick={handleKeyboardInstructionsButtonClick}\n onKeyDown={handleKeyboardInstructionsButtonKeydown}\n variant={ButtonVariant.link}\n />\n </Tooltip>\n <Announce>\n <KeyboardInstructionsCard\n id=\"keyboardInstructions\"\n isOpen={isKeyboardInstructionsOpen}\n theme={theme}\n width=\"350px\"\n >\n <Paragraph\n visualStyle={TypographyVisualStyle.headingXSmall}\n style={{ margin: '0 0 16px' }}\n >\n {i18n.charts.line.keyboardInstructionsHeader}\n </Paragraph>\n {i18n.charts.line.keyboardInstructions}\n </KeyboardInstructionsCard>\n </Announce>\n </div>\n </Tabs>\n <TabPanelsContainer>\n <StyledTabPanel theme={theme}>\n {type === 'line' && (\n <LineChart<T>\n {...other}\n lastFocusedScatterPoint={lastFocusedScatterPoint}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n tabRef={keyboardInstructionsRef}\n unregisterPoint={unregisterPoint}\n />\n )}\n </StyledTabPanel>\n <StyledTabPanel theme={theme}>\n <ChartDataTable\n data={other.data}\n xData={{\n keyValue: other.x,\n label: other.componentProps?.xAxis?.label,\n tickFormat: other.componentProps?.xAxis?.tickFormat,\n }}\n yData={{\n keyValue: other.y,\n tickFormat: other.componentProps?.yAxis?.tickFormat,\n }}\n />\n </StyledTabPanel>\n </TabPanelsContainer>\n </StyledTabsContainer>\n </div>\n );\n}\n\nexport const Chart = React.forwardRef(BaseChart) as <T>(\n props: ChartProps<T> & { ref?: React.MutableRefObject<HTMLDivElement> }\n) => ReturnType<typeof BaseChart>;\n"],"names":["colors","blueGrey300","blueGrey700","grey900","baseProps","width","height","padding","baseLabelStyles","fontFamily","fontSize","letterSpacing","fill","stroke","strokeWidth","centeredLabelStyles","_extends","textAnchor","strokeLinecap","strokeLinejoin","magmaTheme","area","style","data","labels","axis","axisLabel","grid","pointerEvents","ticks","size","tickLabels","polarDependentAxis","bar","boxplot","max","maxLabels","median","medianLabels","min","minLabels","q1","q1Labels","q3","q3Labels","boxWidth","candlestick","candleColors","positive","negative","chart","errorbar","borderWidth","opacity","group","colorScale","histogram","legend","gutter","orientation","titleOrientation","type","title","line","pie","scatter","stack","tooltip","flyoutStyle","flyoutPadding","cornerRadius","pointerLength","voronoi","flyout","typedStyled","styled","StyledGraphTooltip","StyledTooltip","_templateObject","_taggedTemplateLiteralLoose","props","theme","neutral100","neutral300","neutral","typeScale","size02","lineHeight","TooltipColorSwatch","span","_templateObject2","color","GraphTooltip","datum","index","showTooltip","x","y","React","useContext","ThemeContext","_jsx","children","_jsxs","position","TooltipPosition","top","role","iterableColors","label","TooltipArrow","AxisTooltip","activePoints","hiddenData","pointsIndexes","Array","from","dataLength","_","i","filter","includes","map","point","CustomScatterDataComponent","pointIndex","lineIndex","pointRefArray","registerPoint","unregisterPoint","other","_objectWithoutPropertiesLoose","_excluded","Point","ariaLabel","pathComponent","CustomPointComponent","tabIndex","_excluded2","forceUpdate","useForceUpdate","ref","useRef","useEffect","CustomAxisComponent","_ref","events","LineSegment","strokeOpacity","LegendButton","forwardRef","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus","handleOnMouseEnterOrFocus","display","onMouseEnter","onMouseLeave","Checkbox","checked","containerStyle","alignItems","border","boxShadow","margin","inputStyle","neutral800","borderRadius","labelText","onBlur","onFocus","LineChartContainer","div","VictoryChartContainer","DataLegendsContainer","_templateObject3","DataLegendsDescription","p","_templateObject4","LineChart","_props$componentProps","componentProps","_props$componentProps2","_props$componentProps3","_props$componentProps4","_props$componentProps5","xAxis","_props$componentProps6","_props$componentProps7","xAxisLabel","undefined","_props$componentProps8","xTickLabels","xRest","xAxisOther","_props$componentProps9","yAxis","_props$componentProps10","_props$componentProps11","yAxisLabel","_props$componentProps12","yTickLabels","yRest","_excluded3","yAxisOther","_excluded4","_props$data","lastFocusedScatterPoint","tabRef","i18n","I18nContext","_React$useState","useState","setHiddenData","_React$useState2","setWidth","_React$useState3","focusedLine","setFocusedLine","_React$useState4","setShowTooltip","_React$useState5","showXAxisLabel","setShowXAxisLabel","_React$useState6","hoveringOnXAxisLine","setHoveringOnXAxisLine","containerRef","firstLegendButtonRef","updateWidth","window","addEventListener","handleEsc","removeEventListener","handleMouseMove","scatterNames","xAxisStyles","fontWeight","yAxisStyles","current","clientWidth","event","key","setLineOpacity","handleLegendClick","item","concat","buildLineIndexes","acc","currentLineIndex","parseInt","getAttribute","push","buildLineIndexData","currentPointIndex","lineIndexes","reduce","lowestLineIndex","highestLineIndex","length","findPointToFocus","handleFirstLegendButtonKeydown","shiftKey","find","preventDefault","focus","onKeyDown","document","activeElement","focusedPointIndex","findIndex","focusedPoint","_buildLineIndexData","nextLowestLineIndex","indexOf","_buildLineIndexData2","nextHighestLineIndex","VictoryChart","domainPadding","left","right","bottom","containerComponent","VictoryVoronoiContainer","voronoiBlacklist","voronoiDimension","labelComponent","VictoryTooltip","flyoutComponent","voronoiPadding","VictoryAxis","dependentAxis","dataset","VictoryLine","parent","neutral400","_Fragment","gridComponent","_ref2","VictoryScatter","target","eventHandlers","mutation","active","dataComponent","text","charts","dataLegendsLabel","_ref3","legendButtonAriaLabel","replace","toCamelCase","str","toLowerCase","ltr","toUpperCase","ChartDataTable","_props$xData","xData","xKeyValue","keyValue","xTickFormat","tickFormat","xTickValues","tickValues","_props$yData","yData","yKeyValue","yTickFormat","columns","rows","dataForTable","setDataForTable","xField","xTickValuesArray","baseTableData","valuesArray","forEach","value","field","header","isRowHeader","agg","tick","tickValue","isArray","_agg$push","id","tableData","d","yValue","_extends2","Card","Datagrid","hasPagination","Spinner","StyledTitle","size04","bodyFont","StyledParagraph","Paragraph","StyledTabsContainer","TabsContainer","StyledTabPanel","TabPanel","KeyboardInstructionsCard","_templateObject5","isOpen","spaceScale","spacing02","maxHeight","dropdown","content","spacing05","css","_templateObject6","BaseChart","description","keyboardInstructionsRef","_useDescendants","useDescendants","isKeyboardInstructionsOpen","setIsKeyboardInstructionsOpen","visualStyle","TypographyVisualStyle","bodySmall","Tabs","Tab","chartTabLabel","dataTabLabel","marginLeft","Tooltip","keyboardInstructionsTooltip","IconButton","Boolean","icon","KeyboardIcon","prevOpen","variant","ButtonVariant","link","Announce","headingXSmall","keyboardInstructionsHeader","keyboardInstructions","TabPanelsContainer","_other$componentProps","_other$componentProps2","_other$componentProps3","_other$componentProps4","_other$componentProps5","_other$componentProps6"],"mappings":"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"}
package/dist/components/LineChart/ChartDataTable.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { VictoryAxisProps } from 'victory';
2
3
  export declare function toCamelCase(str: string): string;
3
4
  export interface DataTableProps {
package/dist/components/LineChart/DataTable.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export interface DataTableProps {
2
3
  data?: any;
3
4
  }
package/dist/components/LineChart/GraphTooltip.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  export declare const GraphTooltip: (props: any) => JSX.Element | null;
2
3
  export declare const AxisTooltip: (props: any) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-magma/charts",
3
- "version": "6.0.0",
3
+ "version": "6.1.0-next.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -28,10 +28,10 @@
28
28
  "peerDependencies": {
29
29
  "@emotion/core": "^10.1.1",
30
30
  "@emotion/styled": "^10.0.27",
31
- "react": "^17.0.2",
32
- "react-dom": "^17.0.2",
33
- "react-magma-dom": "^4.3.0-next.2",
34
- "react-magma-icons": "^3.0.0"
31
+ "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
32
+ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0",
33
+ "react-magma-dom": "^3.7.0-next.0",
34
+ "react-magma-icons": "2.3.6"
35
35
  },
36
36
  "dependencies": {
37
37
  "victory": "^35.4.12"
@@ -39,9 +39,9 @@
39
39
  "devDependencies": {
40
40
  "@emotion/core": "^10.1.1",
41
41
  "@emotion/styled": "^10.0.27",
42
- "react": "^17.0.2",
43
- "react-dom": "^17.0.2",
44
- "react-magma-dom": "^4.3.0",
45
- "react-magma-icons": "^3.0.0"
42
+ "react": "^16.10.0",
43
+ "react-dom": "^16.10.0",
44
+ "react-magma-dom": "^3.7.0-next.1",
45
+ "react-magma-icons": "2.3.6"
46
46
  }
47
- }
47
+ }
package/src/components/LineChart/Chart.tsx CHANGED
@@ -1,10 +1,4 @@
1
1
  import * as React from 'react';
2
- import {
3
- I18nContext,
4
- styled,
5
- ThemeContext,
6
- useDescendants,
7
- } from 'react-magma-dom';
8
2
  import { css } from '@emotion/core';
9
3
  import { KeyboardIcon } from 'react-magma-icons';
10
4
 
@@ -14,17 +8,24 @@ import {
14
8
  Announce,
15
9
  ButtonVariant,
16
10
  Card,
11
+ I18nContext,
17
12
  IconButton,
18
13
  Paragraph,
19
- TabsContainer,
20
- Tabs,
21
14
  Tab,
22
- TabPanelsContainer,
23
15
  TabPanel,
16
+ TabPanelsContainer,
17
+ Tabs,
18
+ TabsContainer,
19
+ ThemeContext,
20
+ ThemeInterface,
24
21
  Tooltip,
25
22
  TypographyVisualStyle,
23
+ useDescendants,
26
24
  } from 'react-magma-dom';
27
25
 
26
+ import styled, { CreateStyled } from '@emotion/styled';
27
+ const typedStyled = styled as CreateStyled<ThemeInterface>;
28
+
28
29
  interface BaseChartProps {
29
30
  /**
30
31
  * Description of what the line chart data represents placed above the chart
@@ -48,7 +49,7 @@ export interface ChartProps<T extends any>
48
49
  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
49
50
  LineChartProps<T> {}
50
51
 
51
- const StyledTitle = styled.span`
52
+ const StyledTitle = typedStyled.span`
52
53
  color: ${props => props.theme.colors.neutral};
53
54
  font-size: ${props => props.theme.typeScale.size04.fontSize};
54
55
  font-weight: 600;
@@ -57,23 +58,23 @@ const StyledTitle = styled.span`
57
58
  margin: 0 0 12px 0;
58
59
  `;
59
60
 
60
- const StyledParagraph = styled(Paragraph)`
61
+ const StyledParagraph = typedStyled(Paragraph)`
61
62
  font-size: ${props => props.theme.typeScale.size02.fontSize};
62
63
  margin: 0 0 18px 0;
63
64
  `;
64
65
 
65
- const StyledTabsContainer = styled(TabsContainer)`
66
+ const StyledTabsContainer = typedStyled(TabsContainer)`
66
67
  width: 800px;
67
68
  ul {
68
69
  box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};
69
70
  }
70
71
  `;
71
72
 
72
- const StyledTabPanel = styled(TabPanel)`
73
+ const StyledTabPanel = typedStyled(TabPanel)`
73
74
  padding: 22px 0;
74
75
  `;
75
76
 
76
- const KeyboardInstructionsCard = styled(Card)<{
77
+ const KeyboardInstructionsCard = typedStyled(Card)<{
77
78
  isOpen?: boolean;
78
79
  maxHeight?: string;
79
80
  width?: string;
package/src/components/LineChart/GraphTooltip.tsx CHANGED
@@ -5,10 +5,13 @@ import {
5
5
  TooltipArrow,
6
6
  TooltipPosition,
7
7
  ThemeInterface,
8
- styled,
9
8
  } from 'react-magma-dom';
10
9
 
11
- const StyledGraphTooltip = styled(StyledTooltip)`
10
+ import styled, { CreateStyled } from '@emotion/styled';
11
+
12
+ const typedStyled = styled as CreateStyled<ThemeInterface>;
13
+
14
+ const StyledGraphTooltip = typedStyled(StyledTooltip)`
12
15
  background: ${(props: any) => props.theme.colors.neutral100};
13
16
  border: 1px solid ${(props: any) => props.theme.colors.neutral300};
14
17
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
@@ -30,7 +33,7 @@ const StyledGraphTooltip = styled(StyledTooltip)`
30
33
  }
31
34
  `;
32
35
 
33
- const TooltipColorSwatch = styled.span`
36
+ const TooltipColorSwatch = typedStyled.span`
34
37
  background: ${(props: any) => props.color};
35
38
  border: ${(props: any) => (props.color ? 'none' : '3px solid black')};
36
39
  border-radius: 4px;
package/src/components/LineChart/LineChart.stories.tsx CHANGED
@@ -333,9 +333,8 @@ interface HistoryOfTexasInterface {
333
333
  label: string;
334
334
  }
335
335
 
336
- const HistoryOfTexasTemplate: Story<
337
- ChartProps<HistoryOfTexasInterface>
338
- > = args => <Chart {...args} />;
336
+ const HistoryOfTexasTemplate: Story<ChartProps<HistoryOfTexasInterface>> =
337
+ args => <Chart {...args} />;
339
338
 
340
339
  export const HistoryOfTexas = HistoryOfTexasTemplate.bind({});
341
340
  HistoryOfTexas.args = {
package/src/components/LineChart/LineChart.test.js CHANGED
@@ -398,11 +398,9 @@ describe('Line Chart', () => {
398
398
  />
399
399
  );
400
400
 
401
- userEvent.click(getByText(/chart/i, { selector: 'button' }));
402
- userEvent.tab();
403
- userEvent.tab();
404
- userEvent.keyboard('{arrowdown}');
405
- userEvent.keyboard('{arrowright}');
401
+ userEvent.click(getByText(/team 1/i));
402
+ userEvent.click(getByText(/team 1/i));
403
+ userEvent.tab({ shift: true });
406
404
 
407
405
  expect(getByLabelText(data[1].data[1].label)).toHaveFocus();
408
406
 
package/src/components/LineChart/LineChart.tsx CHANGED
@@ -15,7 +15,6 @@ import {
15
15
  import {
16
16
  I18nContext,
17
17
  ThemeContext,
18
- styled,
19
18
  ThemeInterface,
20
19
  I18nInterface,
21
20
  } from 'react-magma-dom';
@@ -26,6 +25,9 @@ import { CustomScatterDataComponent } from './CustomPointComponent';
26
25
  import { CustomAxisComponent } from './CustomAxisComponent';
27
26
  import { LegendButton } from './LegendButton';
28
27
 
28
+ import styled, { CreateStyled } from '@emotion/styled';
29
+ const typedStyled = styled as CreateStyled<ThemeInterface>;
30
+
29
31
  export type LineChartAxisStyle = VictoryAxisProps['style'];
30
32
  export type DataGetterPropType = VictoryLineProps['x'];
31
33
 
@@ -99,7 +101,7 @@ export interface LineChartProps<T extends ChartDataOptions> {
99
101
  y?: keyof T;
100
102
  }
101
103
 
102
- const LineChartContainer = styled.div`
104
+ const LineChartContainer = typedStyled.div`
103
105
  max-height: 600px;
104
106
  max-width: 800px;
105
107
  svg {
@@ -107,13 +109,13 @@ const LineChartContainer = styled.div`
107
109
  }
108
110
  `;
109
111
 
110
- const VictoryChartContainer = styled.div``;
112
+ const VictoryChartContainer = typedStyled.div``;
111
113
 
112
- const DataLegendsContainer = styled.div`
114
+ const DataLegendsContainer = typedStyled.div`
113
115
  padding-bottom: 24px;
114
116
  `;
115
117
 
116
- const DataLegendsDescription = styled.p`
118
+ const DataLegendsDescription = typedStyled.p`
117
119
  color: ${(props: any) => props.theme.colors.neutral};
118
120
  font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};
119
121
  `;
@@ -326,7 +328,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
326
328
 
327
329
  if (focusedPointIndex !== undefined) {
328
330
  focusedPointIndex === pointRefArray.current.length - 1
329
- ? (pointRefArray.current[0]?.current as HTMLButtonElement)?.focus()
331
+ ? (pointRefArray.current[0].current as HTMLButtonElement).focus()
330
332
  : (
331
333
  pointRefArray.current[focusedPointIndex + 1]
332
334
  .current as HTMLButtonElement
package/src/index.ts CHANGED
@@ -1 +1 @@
1
- export * from './components/LineChart';
1
+ export * from './components/LineChart';