@sproutsocial/seeds-react-data-viz 0.24.1 → 0.24.3
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.
- package/dist/{axis-B61qI-nm.d.mts → axis-3XKa6pW7.d.mts} +1 -1
- package/dist/{axis-B78FtYLh.d.ts → axis-BWvZqdQr.d.ts} +1 -1
- package/dist/bar/index.d.mts +2 -2
- package/dist/bar/index.d.ts +2 -2
- package/dist/bar/index.js +11 -11
- package/dist/bubble/index.d.mts +1 -1
- package/dist/bubble/index.d.ts +1 -1
- package/dist/bubble/index.js +5 -5
- package/dist/chart-styles.css +10 -1
- package/dist/{chartBase-Nl6mcTB7.d.ts → chartBase-BM97OBBE.d.ts} +2 -0
- package/dist/{chartBase-CptOt3V0.d.mts → chartBase-D6WI2icR.d.mts} +2 -0
- package/dist/charts.css +10 -1
- package/dist/{chunk-3P6MPBSZ.js → chunk-5JQXDK23.js} +37 -28
- package/dist/chunk-5JQXDK23.js.map +1 -0
- package/dist/{chunk-MTGYEUZN.js → chunk-GHZHRFE6.js} +3 -3
- package/dist/{chunk-MTGYEUZN.js.map → chunk-GHZHRFE6.js.map} +1 -1
- package/dist/{chunk-OP6K5NDR.js → chunk-LKUL4EFZ.js} +8 -4
- package/dist/chunk-LKUL4EFZ.js.map +1 -0
- package/dist/{chunk-2H2Z7PKZ.js → chunk-W57R2V23.js} +2 -19
- package/dist/chunk-W57R2V23.js.map +1 -0
- package/dist/donut/index.d.mts +1 -1
- package/dist/donut/index.d.ts +1 -1
- package/dist/donut/index.js +5 -5
- package/dist/esm/bar/index.js +4 -4
- package/dist/esm/bubble/index.js +2 -2
- package/dist/esm/{chunk-NZX3WPXT.js → chunk-32QLJDP2.js} +1 -18
- package/dist/esm/chunk-32QLJDP2.js.map +1 -0
- package/dist/esm/{chunk-MQDI7D54.js → chunk-AUU3KROF.js} +2 -2
- package/dist/esm/{chunk-Y4RJJBJQ.js → chunk-DF5PVRXT.js} +7 -3
- package/dist/esm/{chunk-Y4RJJBJQ.js.map → chunk-DF5PVRXT.js.map} +1 -1
- package/dist/esm/{chunk-ISP4A622.js → chunk-EWAD675C.js} +57 -48
- package/dist/esm/chunk-EWAD675C.js.map +1 -0
- package/dist/esm/donut/index.js +2 -2
- package/dist/esm/index.js +105 -90
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +4 -4
- package/dist/esm/sparkline/index.js +3 -3
- package/dist/index.js +67 -52
- package/dist/index.js.map +1 -1
- package/dist/line-area/index.d.mts +2 -2
- package/dist/line-area/index.d.ts +2 -2
- package/dist/line-area/index.js +11 -11
- package/dist/sparkline/index.d.mts +3 -3
- package/dist/sparkline/index.d.ts +3 -3
- package/dist/sparkline/index.js +7 -7
- package/package.json +3 -3
- package/dist/chunk-2H2Z7PKZ.js.map +0 -1
- package/dist/chunk-3P6MPBSZ.js.map +0 -1
- package/dist/chunk-OP6K5NDR.js.map +0 -1
- package/dist/esm/chunk-ISP4A622.js.map +0 -1
- package/dist/esm/chunk-NZX3WPXT.js.map +0 -1
- /package/dist/esm/{chunk-MQDI7D54.js.map → chunk-AUU3KROF.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ColorBox/ColorBox.tsx","../../../seeds-react-theme-provider/src/index.tsx","../../src/components/ChartLegend/components/ChartLegendLabel.tsx","../../src/components/ChartLegend/ChartLegend.tsx","../../src/components/ChartTooltip/ChartTooltip.tsx","../../src/components/ChartTooltip/components/ChartTooltipFooter.tsx","../../src/components/ChartTooltip/components/ChartTooltipHeader.tsx","../../src/components/ChartTooltip/components/ChartTooltipPortal.tsx","../../src/components/ChartTable/ChartTable.tsx","../../src/components/ChartTooltip/components/ChartTooltipTable.tsx","../../src/components/ChartTooltip/components/ChartTooltipTitle.tsx","../../src/helpers/transformTimeSeriesTooltipData.ts","../../src/styles/chartStyles.ts"],"sourcesContent":["import { css, type CSSProp } from \"styled-components\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport ThemeProvider from \"@sproutsocial/seeds-react-theme-provider\";\nimport { type TypeSproutTheme } from \"@sproutsocial/seeds-react-theme\";\n\nexport type TypeColorBoxProps = TypeBoxProps;\n\n/**\n * ColorBox extends Box to apply basic styles.\n */\nexport const ColorBox = ({\n display = \"inline-block\",\n height = \"16px\",\n width = \"16px\",\n minWidth = width,\n borderRadius = \"400\",\n ...props\n}: TypeColorBoxProps) => {\n return (\n <Box\n {...props}\n display={display}\n height={height}\n width={width}\n minWidth={minWidth}\n borderRadius={borderRadius}\n css={\n css`\n cursor: ${(\n props: typeof ThemeProvider & {\n onClick: ((e: React.MouseEvent<HTMLElement>) => void) | void;\n }\n ) => (props?.onClick ? \"pointer\" : \"default\")};\n ` as CSSProp<TypeSproutTheme>\n }\n />\n );\n};\n","import * as React from \"react\";\nimport { ThemeProvider as BaseThemeProvider } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n TypeSproutTheme,\n TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n readonly theme?: TypeAllThemes;\n readonly children?: React.ReactNode;\n};\n\nconst ThemeProvider = (props: TypeProps) => (\n <BaseThemeProvider {...props} theme={props.theme || theme}>\n {props.children}\n </BaseThemeProvider>\n);\n\nexport default ThemeProvider;\n","import styled from \"styled-components\";\nimport { memo } from \"react\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\nimport type { TypeLegendLabel } from \"../ChartLegend\";\n\nimport { ColorBox } from \"../../ColorBox\";\n\nconst StyledBox = styled(Box)<TypeBoxProps>`\n list-style: none;\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.space[300]};\n`;\n\nexport type TypeChartLegendLabelProps = Readonly<{\n children: TypeLegendLabel[\"content\"];\n color: TypeLegendLabel[\"color\"];\n // optional\n containerBoxProps?: TypeBoxProps;\n}>;\n\nexport const ChartLegendLabel = memo<TypeChartLegendLabelProps>(\n function ChartLegendLabel({\n children,\n color = \"#CCC\",\n containerBoxProps = {},\n }: TypeChartLegendLabelProps) {\n return (\n <StyledBox {...containerBoxProps}>\n <ColorBox bg={color} />\n <Text as=\"div\" fontSize={200} color=\"text.subtext\">\n {children}\n </Text>\n </StyledBox>\n );\n }\n);\n","import { memo } from \"react\";\nimport { Box, type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport { ChartLegendLabel } from \"./components/ChartLegendLabel\";\n\nexport type TypeLegendLabel = Readonly<{\n content: React.ReactNode;\n color?: string;\n}>;\n\nexport type TypeChartLegendProps = Readonly<{\n legendLabels: ReadonlyArray<TypeLegendLabel>;\n // optional\n containerBoxProps?: TypeBoxProps;\n stacked?: boolean;\n}>;\n\nexport const ChartLegend = memo<TypeChartLegendProps>(function ChartLegend({\n legendLabels,\n containerBoxProps = {},\n stacked = false,\n}: TypeChartLegendProps) {\n return (\n <Box\n as=\"ul\"\n aria-hidden=\"true\"\n display=\"flex\"\n justifyContent=\"center\"\n flexDirection={stacked ? \"column\" : \"row\"}\n flexWrap=\"wrap\"\n columnGap={450}\n rowGap={200}\n m={0}\n p={0}\n {...containerBoxProps}\n >\n {legendLabels.map(({ color, content }, index) => (\n <ChartLegendLabel\n key={`chart-legend-label-${index}`}\n color={color || theme.colors.DATAVIZ_COLORS_LIST[index]}\n containerBoxProps={{ as: \"li\" }}\n >\n {content}\n </ChartLegendLabel>\n ))}\n </Box>\n );\n});\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\n// styled components\nconst StyledBox = styled(Box)`\n .Icon,\n .logo {\n stroke: none;\n }\n`;\n\n// Chart Tooltip\ntype TypeChartTooltipProps = Readonly<{\n children: React.ReactNode;\n}>;\n\nexport const ChartTooltip = memo<TypeChartTooltipProps>(function ChartTooltip({\n children,\n}: TypeChartTooltipProps) {\n return (\n <StyledBox\n bg=\"container.background.base\"\n boxShadow=\"medium\"\n border={500}\n borderColor=\"container.border.base\"\n borderRadius={500}\n p={400}\n minWidth={285}\n >\n <Box display=\"flex\" flexDirection=\"column\" gap={350}>\n {children}\n </Box>\n </StyledBox>\n );\n});\n","import { memo } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\ntype TypeChartTooltipFooterProps = {\n children: React.ReactNode;\n};\n\nexport const ChartTooltipFooter = memo<TypeChartTooltipFooterProps>(\n function ChartTooltipFooter({ children }: TypeChartTooltipFooterProps) {\n return (\n <Box\n borderTop={500}\n borderColor=\"container.border.base\"\n mx={-400}\n mb={-200}\n px={400}\n pt={350}\n >\n {children}\n </Box>\n );\n }\n);\n","import { memo } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\ntype TypeChartTooltipHeaderProps = {\n children: React.ReactNode;\n};\n\nexport const ChartTooltipHeader = memo<TypeChartTooltipHeaderProps>(\n function ChartTooltipHeader({ children }: TypeChartTooltipHeaderProps) {\n return (\n <Box\n borderBottom={500}\n borderColor=\"container.border.base\"\n mx={-400}\n mt={-200}\n px={400}\n pb={350}\n >\n {children}\n </Box>\n );\n }\n);\n","import { memo, useState, useRef, useEffect, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n Tooltip,\n Chart,\n TooltipFormatterContextObject,\n TooltipFormatterCallbackFunction,\n} from \"highcharts\";\n\ninterface ExtendedHighchartsTooltip extends Tooltip {\n label: {\n box: { attr({ height, width }: { height: number; width: number }): void };\n text: { element: HTMLElement };\n };\n}\n\nexport const generateChartTooltipPortalId = (chartId: number) =>\n `highcharts-custom-tooltip-${chartId}`;\n\ntype ChartTooltipPortalProps = Readonly<{\n chart: Chart;\n renderContent: (_context: TooltipFormatterContextObject) => ReactNode;\n}>;\n\nexport const ChartTooltipPortal = memo<ChartTooltipPortalProps>(\n function ChartTooltipPortal({\n chart,\n renderContent,\n }: ChartTooltipPortalProps) {\n const isInitialized = useRef<boolean>(false);\n const [node, setNode] = useState<HTMLElement | null>(null);\n const [context, setContext] =\n useState<TooltipFormatterContextObject | null>(null);\n\n useEffect(() => {\n const formatter: TooltipFormatterCallbackFunction = function () {\n // Ensures that tooltip DOM container is rendered before React portal is created.\n if (!isInitialized.current) {\n isInitialized.current = true;\n chart.tooltip.refresh.apply(chart.tooltip, [this.point]);\n chart.tooltip.hide(0);\n }\n\n setContext(this);\n\n return `<div id=\"${generateChartTooltipPortalId(\n chart.index\n )}\" role='tooltip'></div>`;\n };\n\n chart.update({ tooltip: { formatter } });\n }, [chart]);\n\n useEffect(() => {\n // In some cases tooltip is not available on the chart yet\n if (context?.series?.chart?.tooltip) {\n const tooltip = context.series.chart\n .tooltip as ExtendedHighchartsTooltip;\n const textElement = tooltip.label.text.element;\n\n tooltip.label.box.attr({\n height: textElement.offsetHeight,\n width: textElement.offsetWidth,\n });\n\n setNode(\n document.getElementById(generateChartTooltipPortalId(chart.index))\n );\n }\n }, [context, chart.index]);\n\n return node && context ? createPortal(renderContent(context), node) : null;\n }\n);\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Table as SeedsTable } from \"@sproutsocial/seeds-react-table\";\n\nconst StyledSeedsTable = styled<typeof SeedsTable>(SeedsTable)`\n tbody tr:last-child {\n border-bottom: none;\n }\n tr:last-child td,\n tr:last-child th {\n padding-bottom: 0;\n }\n tr:first-child td,\n tr:first-child th {\n padding-top: 0;\n }\n tr th {\n padding-left: 0;\n }\n tr td:last-child {\n padding-right: 0;\n }\n`;\n\nconst StyledSeedsTableRow = styled(SeedsTable.TableRow)<{\n $isAppendedRow?: boolean;\n}>`\n ${({ $isAppendedRow, theme }) =>\n $isAppendedRow\n ? `border-top: 2px solid ${theme.colors.container.border.base}`\n : \"\"}\n`;\n\nexport type TypeChartTableProps = Readonly<{\n rows: ReadonlyArray<{\n cells: ReadonlyArray<{\n content: React.ReactNode;\n align?: React.ComponentProps<typeof SeedsTable.Cell>[\"align\"];\n colSpan?: React.ComponentProps<typeof SeedsTable.Cell>[\"colSpan\"];\n }>;\n isAppendedRow?: boolean;\n }>;\n}>;\n\nexport const ChartTable = memo<TypeChartTableProps>(function ChartTable({\n rows,\n}: TypeChartTableProps) {\n if (!rows || rows.length === 0) {\n return null;\n }\n\n return (\n <StyledSeedsTable>\n <SeedsTable.TableBody>\n {rows.map(({ cells, isAppendedRow }, rowIndex) => {\n if (!cells || cells.length === 0) {\n return null;\n }\n\n return (\n <StyledSeedsTableRow\n key={`chart-tooltip-table-row-${rowIndex}`}\n $isAppendedRow={isAppendedRow}\n >\n {cells.map(\n ({ content, align = \"left\", colSpan = 1 }, cellIndex) => {\n const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;\n return (\n <SeedsTable.Cell\n key={uniqueIdentifier}\n id={uniqueIdentifier}\n scope={cellIndex === 0 ? \"row\" : undefined}\n align={align}\n colSpan={colSpan}\n py={200}\n >\n <Text.SmallBodyCopy as=\"div\">\n {content}\n </Text.SmallBodyCopy>\n </SeedsTable.Cell>\n );\n }\n )}\n </StyledSeedsTableRow>\n );\n })}\n </SeedsTable.TableBody>\n </StyledSeedsTable>\n );\n});\n","import { memo } from \"react\";\n\nimport { ChartTable, type TypeChartTableProps } from \"../../ChartTable\";\n\nexport type TypeChartTooltipTableProps = {\n rows: TypeChartTableProps[\"rows\"];\n};\n\nexport const ChartTooltipTable = memo<TypeChartTooltipTableProps>(\n function ChartTooltipTable({ rows }: TypeChartTooltipTableProps) {\n return <ChartTable rows={rows} />;\n }\n);\n","import { memo } from \"react\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\ntype TypeChartTooltipTitleProps = {\n children: React.ReactNode;\n};\n\nexport const ChartTooltipTitle = memo<TypeChartTooltipTitleProps>(\n function ChartTooltipTitle({ children }: TypeChartTooltipTitleProps) {\n return <Text.SmallSubHeadline as=\"p\">{children}</Text.SmallSubHeadline>;\n }\n);\n","import type { TooltipFormatterContextObject } from \"highcharts\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeAreaChartProps } from \"../components/AreaChart\";\nimport type { TypeLineChartProps } from \"../components/LineChart\";\nimport type { TypeChartTooltipProps } from \"../types\";\n\ntype TypeTransformTimeSeriesTooltipDataProps = Readonly<{\n context: TooltipFormatterContextObject;\n data: TypeAreaChartProps[\"data\"] | TypeLineChartProps[\"data\"];\n}>;\ntype TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps[\"data\"];\n\nexport const transformTimeSeriesTooltipData = ({\n context,\n data,\n}: TypeTransformTimeSeriesTooltipDataProps): TypeTransformTimeSeriesTooltipDataReturn => {\n // @ts-expect-error - Highcharts tooltip context series typing does not expose chart.series here\n return (context.series.chart.series || []).map((series, index) => {\n const pointIndex = context.point.index;\n const y = series?.points?.[pointIndex]?.y;\n\n return {\n color:\n data[index]?.styles?.color || theme.colors.DATAVIZ_COLORS_LIST[index],\n ...(data[index]?.icon ? { icon: data[index]?.icon } : {}),\n name: series.name,\n value: typeof y === \"number\" ? y : null,\n };\n });\n};\n","import { css, createGlobalStyle } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport {\n type TypeChartStyleColor,\n type TypeChartStyleHasOnClick,\n type TypeChartStylePattern,\n} from \"../types\";\nimport \"highcharts/css/highcharts.css\";\n\nexport const GlobalChartStyleOverrides = createGlobalStyle`\n // USAGE NOTE:\n // Put general styles in baseChartStyles instead when possible to avoid excessive global styling.\n // This global component is only for styles that can't override highcharts defaults when scoped.\n\n .highcharts-tooltip-container {\n z-index: 7 !important;\n }\n .highcharts-tooltip-box {\n fill: transparent !important;\n }\n`;\n\n// options that should apply to all charts\nexport const baseChartStyles = css<\n Readonly<{ $colors: ReadonlyArray<TypeChartStyleColor> }>\n>`\n --highcharts-background-color: ${({ theme }) =>\n theme.colors.container.background.base};\n\n // set color variables and map to each series\n ${({ $colors }) =>\n $colors\n .map((color, index) => {\n const chartColor = color || theme.colors.DATAVIZ_COLORS_LIST[index];\n return `\n\t\t\t\t// map colors to custom assigned colors or fallback to default data viz color rotation\n\t\t\t\t--highcharts-color-${index}: ${chartColor};\n\n\t\t\t\t// highcharts already accounts for 10 series, but if we have more, we need to add them\n\t\t\t\t.highcharts-color-${index} {\n\t\t\t\t\tcolor: var(--highcharts-color-${index});\n\t\t\t\t\tstroke: var(--highcharts-color-${index});\n\t\t\t\t\tfill: var(--highcharts-color-${index});\n\t\t\t\t}`;\n })\n .join(\"\\n\")}\n\n // set overall chart background color\n .highcharts-background {\n fill: ${({ theme }) => theme.colors.container.background.base};\n }\n\n g.highcharts-annotation-label {\n display: none;\n }\n\n div.highcharts-annotation-label {\n top: 0 !important;\n transform: translateX(-50%); // centers the label on the targeted axis point\n pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom\n }\n`;\n\n// options that should apply to time series charts\nexport const timeSeriesChartStyles = css<\n Readonly<{\n $colors: ReadonlyArray<TypeChartStyleColor>;\n $hasOnClick: TypeChartStyleHasOnClick;\n }>\n>`\n ${baseChartStyles}\n\n // vertical crosshair styles\n\t.highcharts-crosshair {\n stroke: ${({ theme }) => theme.colors.container.border.decorative.neutral};\n stroke-width: 1;\n }\n\n // axis and gridline styles\n .highcharts-grid-line {\n stroke: ${({ theme }) => theme.colors.container.border.base};\n }\n\n .highcharts-axis-line {\n stroke: ${({ theme }) => theme.colors.container.border.base};\n }\n\n .highcharts-tick {\n stroke: none;\n }\n .highcharts-xaxis-labels,\n .highcharts-yaxis-labels {\n // v1 HTML labels (useHTML: true). v2 SVG label styles live in\n // charts/shared/styles.ts (axisLabelV2Styles) — don't add v2 rules here.\n > span {\n font-family: ${({ theme }) => theme.fontFamily};\n ${({ theme }) => theme.typography[100]};\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n color: ${({ theme }) => theme.colors.text.subtext};\n }\n }\n .highcharts-xaxis-labels {\n // v1 HTML stacked labels (useHTML: true). v2 SVG stacked-label styles live\n // in charts/shared/styles.ts (axisLabelV2Styles).\n > span {\n display: flex;\n flex-direction: column;\n align-items: center;\n > span:nth-of-type(2) {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n }\n\n // we don't want to drop the opacity when another item is hovered\n .highcharts-series-inactive {\n opacity: 1;\n }\n\n // apply cursor pointer when click functionality is turned on\n ${({ $hasOnClick }) =>\n $hasOnClick &&\n `\n \t\t\t.highcharts-series,\n \t\t\t.highcharts-point {\n \t\t\t\tcursor: pointer;\n \t\t\t}\n \t\t\t.highcharts-plot-background,\n \t\t\t.highcharts-crosshair,\n \t\t\t.highcharts-grid-line {\n \t\t\t\tfill: transparent;\n \t\t\t\tcursor: pointer;\n \t\t}`}\n\n path.highcharts-plot-line.y-axis-zero-line {\n stroke: ${({ theme }) => theme.colors.container.border.decorative.neutral};\n }\n`;\n\n// options that should apply to line charts\nexport const lineChartStyles = css<\n Readonly<{\n $colors: ReadonlyArray<TypeChartStyleColor>;\n $patterns: ReadonlyArray<TypeChartStylePattern>;\n $hasOnClick: TypeChartStyleHasOnClick;\n }>\n>`\n ${timeSeriesChartStyles}\n\n // set the line stroke\n\t.highcharts-graph {\n stroke-width: 3;\n }\n\n // dashed line styles\n ${({ $patterns }) =>\n $patterns.map((pattern, index) => {\n return pattern === \"dashed\"\n ? `\n \t\t\t\t\t// highcharts already accounts for 10 series, but if we have more, we need to add them\n \t\t\t\t\t.highcharts-series-${index} {\n \t\t\t\t\t\tstroke-dasharray: 2, 8;\n \t\t\t\t\t}`\n : \"\";\n })}\n`;\n\n// options that should apply to area charts\nexport const areaChartStyles = css`\n ${timeSeriesChartStyles}\n\n // don't need to show a stroke for the line part of each area\n\t.highcharts-graph {\n stroke-width: 0;\n }\n\n // fill areas to full opacity\n .highcharts-area {\n fill-opacity: 1;\n }\n`;\n\n// options that should apply to donut charts\nexport const donutChartStyles = css<\n Readonly<{\n $colors: ReadonlyArray<TypeChartStyleColor>;\n $hasOnClick: TypeChartStyleHasOnClick;\n }>\n>`\n ${baseChartStyles}\n\n // remove 250ms fade in/out when hovering over different donut chart slices\n\t.highcharts-point {\n transition: opacity 0s;\n }\n\n // remove stroke on donut slices\n .highcharts-pie-series .highcharts-point {\n stroke: none;\n }\n\n // don't reduce opacity when hovering\n .highcharts-point-hover {\n fill-opacity: none;\n }\n\n // apply cursor pointer when click functionality is turned on\n ${({ $hasOnClick }) =>\n $hasOnClick &&\n `\n \t\t\t.highcharts-series,\n \t\t\t.highcharts-point {\n \t\t\t\tcursor: pointer;\n \t\t\t}\n \t\t\t.highcharts-plot-background,\n \t\t\t.highcharts-crosshair,\n \t\t\t.highcharts-grid-line {\n \t\t\t\tfill: transparent;\n \t\t\t\tcursor: pointer;\n \t\t}`}\n`;\n"],"mappings":"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","names":["jsx","props","Box","jsx","Box","theme","ChartLegendLabel","memo","Box","theme","jsx","memo","ChartLegend","Box","theme","memo","styled","Box","jsx","StyledBox","ChartTooltip","memo","Box","jsx","ChartTooltipFooter","memo","Box","jsx","ChartTooltipHeader","memo","ChartTooltipPortal","memo","styled","Text","jsx","theme","ChartTable","memo","jsx","memo","ChartTooltipTable","memo","Text","jsx","ChartTooltipTitle","theme","css","theme","css","theme"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
valueFormatter
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-EWAD675C.js";
|
|
4
4
|
|
|
5
5
|
// src/charts/shared/annotations.ts
|
|
6
6
|
function buildAnnotationConfig(annotations) {
|
|
@@ -65,4 +65,4 @@ export {
|
|
|
65
65
|
defaultValueAxisLabelFormatter,
|
|
66
66
|
makeValueAxisLabelFormatter
|
|
67
67
|
};
|
|
68
|
-
//# sourceMappingURL=chunk-
|
|
68
|
+
//# sourceMappingURL=chunk-AUU3KROF.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
datetimeFormatter
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-EWAD675C.js";
|
|
4
4
|
|
|
5
5
|
// src/charts/shared/axisOptions.ts
|
|
6
6
|
function makeDatetimeAxisLabelFormatter(timezone, timeFormat) {
|
|
@@ -36,7 +36,11 @@ function resolveTooltipTimezone(axis, timezone) {
|
|
|
36
36
|
function resolveTooltipOptions(input) {
|
|
37
37
|
const { xAxis, timezone } = input;
|
|
38
38
|
if (!xAxis) {
|
|
39
|
-
return {
|
|
39
|
+
return {
|
|
40
|
+
timezone: void 0,
|
|
41
|
+
timeFormat: void 0,
|
|
42
|
+
textLocale: void 0
|
|
43
|
+
};
|
|
40
44
|
}
|
|
41
45
|
return {
|
|
42
46
|
timezone: resolveTooltipTimezone(xAxis, timezone),
|
|
@@ -49,4 +53,4 @@ export {
|
|
|
49
53
|
buildDimensionalAxis,
|
|
50
54
|
resolveTooltipOptions
|
|
51
55
|
};
|
|
52
|
-
//# sourceMappingURL=chunk-
|
|
56
|
+
//# sourceMappingURL=chunk-DF5PVRXT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/charts/shared/axisOptions.ts"],"sourcesContent":["// Shared adapter helpers for the X/Y chart families (bar, line-area, …). Each\n// family's adapter still owns its `chart.type`, `plotOptions`, `series`, and\n// value (y) axis; these utilities cover the dimensional-axis + timezone wiring\n// that is identical across families, so it lives in one place.\n//\n// Deliberately granular (one concern per function) rather than a single base-\n// options builder, so a non-X/Y family like donut can reuse the subset that\n// applies to it. The broader shared-shell + value-axis sharing is left to the\n// X/Y pattern-sharing spike — the value axis in particular diverges per family\n// today (e.g. bar's declarative `format` from CE-41), so it stays per-family.\n\nimport type { DimensionalAxis } from \"./axis\";\nimport type {\n ChartTooltipProps,\n SeedsAxisLabelFormatterContext,\n SeedsChartXAxisOptions,\n} from \"./chartBase\";\nimport { datetimeFormatter } from \"./formatters/datetimeFormatter\";\nimport type { DatetimeTimeFormat } from \"./formatters/datetimeFormatter\";\n\n// Datetime tick labels: a granularity-aware, timezone/DST-correct two-line\n// stacked label via the shared `datetimeFormatter`, rendered as SVG. `<br/>` is a\n// line break in Highcharts' SVG text (styledMode, useHTML: false); the secondary\n// token is wrapped in a <span> — rendered as a <tspan> — styled by the\n// `.highcharts-xaxis-labels` rule in `styles/chartStyles.ts`.\nfunction makeDatetimeAxisLabelFormatter(\n timezone: string,\n timeFormat: DatetimeTimeFormat | undefined\n) {\n return function (this: SeedsAxisLabelFormatterContext): string {\n const { primary, secondary } = datetimeFormatter({\n value: this.value,\n tickPositions: this.axis.tickPositions ?? [],\n timezone,\n timeFormat,\n });\n return secondary\n ? `${primary}<br/><span class=\"hc-axis-label-secondary\">${secondary}</span>`\n : primary;\n };\n}\n\n/**\n * Builds the dimensional (x) axis options shared by the X/Y chart families.\n * Category axes pass their labels through; datetime axes get the granularity-\n * aware two-line label formatter. `timezone` is only consulted for datetime.\n */\nexport function buildDimensionalAxis(\n axis: DimensionalAxis,\n timezone: string\n): SeedsChartXAxisOptions {\n if (axis.type === \"datetime\") {\n return {\n type: \"datetime\",\n crosshair: axis.crosshair,\n labels: {\n formatter: makeDatetimeAxisLabelFormatter(timezone, axis.timeFormat),\n },\n };\n }\n return {\n type: \"category\",\n categories: [...axis.categories],\n crosshair: axis.crosshair,\n };\n}\n\n/**\n * The timezone shared by datetime-axis ticks (`time.timezone`) and the tooltip\n * date formatter, so they can never disagree about the day. Defaults to `\"UTC\"`\n * on a datetime axis; `undefined` on a category axis (timezone is meaningless).\n */\nexport function resolveTooltipTimezone(\n axis: DimensionalAxis,\n timezone?: string\n): string | undefined {\n return axis.type === \"datetime\" ? timezone ?? \"UTC\" : undefined;\n}\n\n/**\n * The slice of a family's public props the tooltip defaults derive from. Every\n * X/Y family satisfies this structurally, so a family passes its props straight\n * in. Growing the inputs means widening this type, not changing call sites.\n */\nexport type ChartTooltipOptionsInput = Readonly<{\n xAxis?: DimensionalAxis;\n timezone?: string;\n}>;\n\n/**\n * The tooltip's datetime-derived options as one object, so the resolver output\n * and the `ChartTooltipProps` payload can't drift. `timezone` gets the `?? \"UTC\"`\n * default via `resolveTooltipTimezone`; `timeFormat` is read straight off a\n * datetime axis; `textLocale` has no input source in this signature today\n * (CE-35) and resolves to `undefined` — wiring it to `valueFormat.textLocale` is\n * out of scope. Both sides are derived types: widen the input, add the field to\n * `ChartTooltipProps` and this `Pick`, and the compiler keeps them aligned.\n */\nexport function resolveTooltipOptions(\n input: ChartTooltipOptionsInput\n): Pick<ChartTooltipProps, \"timezone\" | \"timeFormat\" | \"textLocale\"> {\n const { xAxis, timezone } = input;\n if (!xAxis) {\n return {
|
|
1
|
+
{"version":3,"sources":["../../src/charts/shared/axisOptions.ts"],"sourcesContent":["// Shared adapter helpers for the X/Y chart families (bar, line-area, …). Each\n// family's adapter still owns its `chart.type`, `plotOptions`, `series`, and\n// value (y) axis; these utilities cover the dimensional-axis + timezone wiring\n// that is identical across families, so it lives in one place.\n//\n// Deliberately granular (one concern per function) rather than a single base-\n// options builder, so a non-X/Y family like donut can reuse the subset that\n// applies to it. The broader shared-shell + value-axis sharing is left to the\n// X/Y pattern-sharing spike — the value axis in particular diverges per family\n// today (e.g. bar's declarative `format` from CE-41), so it stays per-family.\n\nimport type { DimensionalAxis } from \"./axis\";\nimport type {\n ChartTooltipProps,\n SeedsAxisLabelFormatterContext,\n SeedsChartXAxisOptions,\n} from \"./chartBase\";\nimport { datetimeFormatter } from \"./formatters/datetimeFormatter\";\nimport type { DatetimeTimeFormat } from \"./formatters/datetimeFormatter\";\n\n// Datetime tick labels: a granularity-aware, timezone/DST-correct two-line\n// stacked label via the shared `datetimeFormatter`, rendered as SVG. `<br/>` is a\n// line break in Highcharts' SVG text (styledMode, useHTML: false); the secondary\n// token is wrapped in a <span> — rendered as a <tspan> — styled by the\n// `.highcharts-xaxis-labels` rule in `styles/chartStyles.ts`.\nfunction makeDatetimeAxisLabelFormatter(\n timezone: string,\n timeFormat: DatetimeTimeFormat | undefined\n) {\n return function (this: SeedsAxisLabelFormatterContext): string {\n const { primary, secondary } = datetimeFormatter({\n value: this.value,\n tickPositions: this.axis.tickPositions ?? [],\n timezone,\n timeFormat,\n });\n return secondary\n ? `${primary}<br/><span class=\"hc-axis-label-secondary\">${secondary}</span>`\n : primary;\n };\n}\n\n/**\n * Builds the dimensional (x) axis options shared by the X/Y chart families.\n * Category axes pass their labels through; datetime axes get the granularity-\n * aware two-line label formatter. `timezone` is only consulted for datetime.\n */\nexport function buildDimensionalAxis(\n axis: DimensionalAxis,\n timezone: string\n): SeedsChartXAxisOptions {\n if (axis.type === \"datetime\") {\n return {\n type: \"datetime\",\n crosshair: axis.crosshair,\n labels: {\n formatter: makeDatetimeAxisLabelFormatter(timezone, axis.timeFormat),\n },\n };\n }\n return {\n type: \"category\",\n categories: [...axis.categories],\n crosshair: axis.crosshair,\n };\n}\n\n/**\n * The timezone shared by datetime-axis ticks (`time.timezone`) and the tooltip\n * date formatter, so they can never disagree about the day. Defaults to `\"UTC\"`\n * on a datetime axis; `undefined` on a category axis (timezone is meaningless).\n */\nexport function resolveTooltipTimezone(\n axis: DimensionalAxis,\n timezone?: string\n): string | undefined {\n return axis.type === \"datetime\" ? timezone ?? \"UTC\" : undefined;\n}\n\n/**\n * The slice of a family's public props the tooltip defaults derive from. Every\n * X/Y family satisfies this structurally, so a family passes its props straight\n * in. Growing the inputs means widening this type, not changing call sites.\n */\nexport type ChartTooltipOptionsInput = Readonly<{\n xAxis?: DimensionalAxis;\n timezone?: string;\n}>;\n\n/**\n * The tooltip's datetime-derived options as one object, so the resolver output\n * and the `ChartTooltipProps` payload can't drift. `timezone` gets the `?? \"UTC\"`\n * default via `resolveTooltipTimezone`; `timeFormat` is read straight off a\n * datetime axis; `textLocale` has no input source in this signature today\n * (CE-35) and resolves to `undefined` — wiring it to `valueFormat.textLocale` is\n * out of scope. Both sides are derived types: widen the input, add the field to\n * `ChartTooltipProps` and this `Pick`, and the compiler keeps them aligned.\n */\nexport function resolveTooltipOptions(\n input: ChartTooltipOptionsInput\n): Pick<ChartTooltipProps, \"timezone\" | \"timeFormat\" | \"textLocale\"> {\n const { xAxis, timezone } = input;\n if (!xAxis) {\n return {\n timezone: undefined,\n timeFormat: undefined,\n textLocale: undefined,\n };\n }\n return {\n timezone: resolveTooltipTimezone(xAxis, timezone),\n timeFormat: xAxis.type === \"datetime\" ? xAxis.timeFormat : undefined,\n textLocale: undefined,\n };\n}\n"],"mappings":";;;;;AAyBA,SAAS,+BACP,UACA,YACA;AACA,SAAO,WAAwD;AAC7D,UAAM,EAAE,SAAS,UAAU,IAAI,kBAAkB;AAAA,MAC/C,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK,KAAK,iBAAiB,CAAC;AAAA,MAC3C;AAAA,MACA;AAAA,IACF,CAAC;AACD,WAAO,YACH,GAAG,OAAO,8CAA8C,SAAS,YACjE;AAAA,EACN;AACF;AAOO,SAAS,qBACd,MACA,UACwB;AACxB,MAAI,KAAK,SAAS,YAAY;AAC5B,WAAO;AAAA,MACL,MAAM;AAAA,MACN,WAAW,KAAK;AAAA,MAChB,QAAQ;AAAA,QACN,WAAW,+BAA+B,UAAU,KAAK,UAAU;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AACA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY,CAAC,GAAG,KAAK,UAAU;AAAA,IAC/B,WAAW,KAAK;AAAA,EAClB;AACF;AAOO,SAAS,uBACd,MACA,UACoB;AACpB,SAAO,KAAK,SAAS,aAAa,YAAY,QAAQ;AACxD;AAqBO,SAAS,sBACd,OACmE;AACnE,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AACA,SAAO;AAAA,IACL,UAAU,uBAAuB,OAAO,QAAQ;AAAA,IAChD,YAAY,MAAM,SAAS,aAAa,MAAM,aAAa;AAAA,IAC3D,YAAY;AAAA,EACd;AACF;","names":[]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ChartLegend,
|
|
3
3
|
ChartLegendLabel,
|
|
4
|
-
ChartLegendLabelContentWithIcon,
|
|
5
4
|
ChartTooltip,
|
|
6
5
|
ChartTooltipFooter,
|
|
7
6
|
ChartTooltipHeader,
|
|
@@ -10,7 +9,7 @@ import {
|
|
|
10
9
|
ChartTooltipTitle,
|
|
11
10
|
GlobalChartStyleOverrides,
|
|
12
11
|
transformTimeSeriesTooltipData
|
|
13
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-32QLJDP2.js";
|
|
14
13
|
|
|
15
14
|
// src/charts/shared/chartBase.tsx
|
|
16
15
|
import Highcharts from "highcharts";
|
|
@@ -132,9 +131,22 @@ var ChartAnnotationMarkerPortal = memo(
|
|
|
132
131
|
|
|
133
132
|
// src/charts/shared/DefaultChartTooltip.tsx
|
|
134
133
|
import { Box as Box2 } from "@sproutsocial/seeds-react-box";
|
|
135
|
-
import { Icon as
|
|
134
|
+
import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
|
|
136
135
|
import { Text } from "@sproutsocial/seeds-react-text";
|
|
137
136
|
|
|
137
|
+
// src/charts/shared/ChartLabelWithIcon.tsx
|
|
138
|
+
import { memo as memo2 } from "react";
|
|
139
|
+
import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
|
|
140
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
141
|
+
var ChartLabelWithIcon = memo2(
|
|
142
|
+
function ChartLabelWithIcon2({ children, icon }) {
|
|
143
|
+
return icon ? /* @__PURE__ */ jsxs2("div", { className: "seeds-chart-label-with-icon", children: [
|
|
144
|
+
/* @__PURE__ */ jsx2(Icon2, { name: icon, fixedWidth: true, "aria-hidden": true }),
|
|
145
|
+
children
|
|
146
|
+
] }) : children;
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
|
|
138
150
|
// src/charts/shared/formatters/datetimeFormatter.ts
|
|
139
151
|
var DAY_MS = 864e5;
|
|
140
152
|
var WEEK_MS = 6048e5;
|
|
@@ -343,7 +355,7 @@ function valueFormatter({
|
|
|
343
355
|
}
|
|
344
356
|
|
|
345
357
|
// src/charts/shared/DefaultChartTooltip.tsx
|
|
346
|
-
import { Fragment as Fragment2, jsx as
|
|
358
|
+
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
347
359
|
function formatTitle({
|
|
348
360
|
position,
|
|
349
361
|
timezone,
|
|
@@ -367,12 +379,12 @@ function AnnotationHeader({
|
|
|
367
379
|
}) {
|
|
368
380
|
const hasIconOrTitle = Boolean(icon || title);
|
|
369
381
|
if (!hasIconOrTitle && !description) return null;
|
|
370
|
-
return /* @__PURE__ */
|
|
371
|
-
hasIconOrTitle ? /* @__PURE__ */
|
|
372
|
-
icon ? /* @__PURE__ */
|
|
373
|
-
title ? /* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
383
|
+
hasIconOrTitle ? /* @__PURE__ */ jsx3(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs3(Box2, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
384
|
+
icon ? /* @__PURE__ */ jsx3(Icon3, { name: icon, size: "mini", color: "icon.base" }) : null,
|
|
385
|
+
title ? /* @__PURE__ */ jsx3(Text, { color: "text.body", fontSize: 200, children: title }) : null
|
|
374
386
|
] }) }) : null,
|
|
375
|
-
description ? /* @__PURE__ */
|
|
387
|
+
description ? /* @__PURE__ */ jsx3(ChartTooltipHeader, { children: /* @__PURE__ */ jsx3(Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
|
|
376
388
|
] });
|
|
377
389
|
}
|
|
378
390
|
function DefaultChartTooltip({
|
|
@@ -393,19 +405,19 @@ function DefaultChartTooltip({
|
|
|
393
405
|
const rows = data.map((d) => {
|
|
394
406
|
const formattedValue = d.value == null ? invalidNumberLabel ?? "\u2014" : valueFormatter({ ...valueFormat, value: d.value, abbreviate: false });
|
|
395
407
|
const nameCell = {
|
|
396
|
-
content: /* @__PURE__ */
|
|
408
|
+
content: /* @__PURE__ */ jsx3(ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ jsx3(ChartLabelWithIcon, { icon: d.icon, children: /* @__PURE__ */ jsx3(Text, { "aria-label": `${d.name}: `, children: d.name }) }) })
|
|
397
409
|
};
|
|
398
410
|
return {
|
|
399
411
|
cells: [
|
|
400
412
|
nameCell,
|
|
401
413
|
{
|
|
402
|
-
content: d.percent != null && !isNaN(d.percent) ? /* @__PURE__ */
|
|
403
|
-
/* @__PURE__ */
|
|
414
|
+
content: d.percent != null && !isNaN(d.percent) ? /* @__PURE__ */ jsxs3(Box2, { display: "inline-flex", alignItems: "center", gap: 350, children: [
|
|
415
|
+
/* @__PURE__ */ jsxs3(Text, { children: [
|
|
404
416
|
Math.round(d.percent),
|
|
405
417
|
"%"
|
|
406
418
|
] }),
|
|
407
|
-
/* @__PURE__ */
|
|
408
|
-
] }) : /* @__PURE__ */
|
|
419
|
+
/* @__PURE__ */ jsx3(Text, { fontWeight: "semibold", children: formattedValue })
|
|
420
|
+
] }) : /* @__PURE__ */ jsx3(Text, { children: formattedValue }),
|
|
409
421
|
align: "right"
|
|
410
422
|
}
|
|
411
423
|
]
|
|
@@ -418,11 +430,11 @@ function DefaultChartTooltip({
|
|
|
418
430
|
isAppendedRow: true,
|
|
419
431
|
cells: [
|
|
420
432
|
{
|
|
421
|
-
content: /* @__PURE__ */
|
|
433
|
+
content: /* @__PURE__ */ jsx3(Text, { fontWeight: "semibold", "aria-label": "Total: ", children: "Total" })
|
|
422
434
|
},
|
|
423
435
|
{
|
|
424
436
|
// Mirror the per-series value cell's formatting path exactly.
|
|
425
|
-
content: /* @__PURE__ */
|
|
437
|
+
content: /* @__PURE__ */ jsx3(Text, { fontWeight: "bold", children: total == null ? invalidNumberLabel ?? "\u2014" : valueFormatter({
|
|
426
438
|
...valueFormat,
|
|
427
439
|
value: total,
|
|
428
440
|
abbreviate: false
|
|
@@ -432,8 +444,8 @@ function DefaultChartTooltip({
|
|
|
432
444
|
]
|
|
433
445
|
}
|
|
434
446
|
] : [];
|
|
435
|
-
return /* @__PURE__ */
|
|
436
|
-
annotation ? /* @__PURE__ */
|
|
447
|
+
return /* @__PURE__ */ jsxs3(ChartTooltip, { children: [
|
|
448
|
+
annotation ? /* @__PURE__ */ jsx3(
|
|
437
449
|
AnnotationHeader,
|
|
438
450
|
{
|
|
439
451
|
icon: annotation.icon,
|
|
@@ -441,44 +453,38 @@ function DefaultChartTooltip({
|
|
|
441
453
|
description: annotation.description
|
|
442
454
|
}
|
|
443
455
|
) : null,
|
|
444
|
-
hideTitle ? null : /* @__PURE__ */
|
|
456
|
+
hideTitle ? null : /* @__PURE__ */ jsx3(ChartTooltipTitle, { children: formatTitle({
|
|
445
457
|
position,
|
|
446
458
|
timezone,
|
|
447
459
|
timeFormat,
|
|
448
460
|
tickPositions,
|
|
449
461
|
textLocale
|
|
450
462
|
}) }),
|
|
451
|
-
/* @__PURE__ */
|
|
463
|
+
/* @__PURE__ */ jsx3(
|
|
452
464
|
ChartTooltipTable,
|
|
453
465
|
{
|
|
454
466
|
rows: [...rows, ...totalRow]
|
|
455
467
|
}
|
|
456
468
|
),
|
|
457
|
-
hasOnClick && tooltipClickLabel ? /* @__PURE__ */
|
|
458
|
-
/* @__PURE__ */
|
|
459
|
-
/* @__PURE__ */
|
|
469
|
+
hasOnClick && tooltipClickLabel ? /* @__PURE__ */ jsx3(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs3(Box2, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
470
|
+
/* @__PURE__ */ jsx3(Icon3, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
|
|
471
|
+
/* @__PURE__ */ jsx3(Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
|
|
460
472
|
] }) : tooltipClickLabel }) : null
|
|
461
473
|
] });
|
|
462
474
|
}
|
|
463
475
|
|
|
464
476
|
// src/charts/shared/SeriesLegend.tsx
|
|
465
|
-
import { memo as
|
|
466
|
-
import
|
|
467
|
-
import { jsx as
|
|
468
|
-
var SeriesLegend =
|
|
477
|
+
import { memo as memo3 } from "react";
|
|
478
|
+
import "@sproutsocial/seeds-react-icon";
|
|
479
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
480
|
+
var SeriesLegend = memo3(function SeriesLegend2({
|
|
469
481
|
items
|
|
470
482
|
}) {
|
|
471
483
|
const labels = items.map((item) => ({
|
|
472
|
-
content: /* @__PURE__ */
|
|
473
|
-
ChartLegendLabelContentWithIcon,
|
|
474
|
-
{
|
|
475
|
-
icon: item.icon ? /* @__PURE__ */ jsx3(Icon3, { name: item.icon, fixedWidth: true, "aria-hidden": true }) : void 0,
|
|
476
|
-
children: item.name
|
|
477
|
-
}
|
|
478
|
-
),
|
|
484
|
+
content: /* @__PURE__ */ jsx4(ChartLabelWithIcon, { icon: item.icon, children: item.name }),
|
|
479
485
|
color: item.color
|
|
480
486
|
}));
|
|
481
|
-
return /* @__PURE__ */
|
|
487
|
+
return /* @__PURE__ */ jsx4(ChartLegend, { legendLabels: labels });
|
|
482
488
|
});
|
|
483
489
|
|
|
484
490
|
// src/charts/shared/chartExport.ts
|
|
@@ -492,7 +498,7 @@ function slugify(value) {
|
|
|
492
498
|
}
|
|
493
499
|
|
|
494
500
|
// src/charts/shared/chartBase.tsx
|
|
495
|
-
import { Fragment as Fragment3, jsx as
|
|
501
|
+
import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
496
502
|
highchartsAccessibility(Highcharts);
|
|
497
503
|
highchartsAnnotations(Highcharts);
|
|
498
504
|
highchartsExporting(Highcharts);
|
|
@@ -763,9 +769,9 @@ function ChartRenderer({
|
|
|
763
769
|
if (series.length === 0) return null;
|
|
764
770
|
const chartWithAnnotations = chart;
|
|
765
771
|
const hasRenderedAnnotations = !!chartWithAnnotations?.annotations?.length && !!annotationLookup?.size && plotHeight > 0;
|
|
766
|
-
return /* @__PURE__ */
|
|
767
|
-
/* @__PURE__ */
|
|
768
|
-
/* @__PURE__ */
|
|
772
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
773
|
+
/* @__PURE__ */ jsx5(GlobalChartStyleOverrides, {}),
|
|
774
|
+
/* @__PURE__ */ jsx5(
|
|
769
775
|
HighchartsReact,
|
|
770
776
|
{
|
|
771
777
|
highcharts: Highcharts,
|
|
@@ -773,7 +779,7 @@ function ChartRenderer({
|
|
|
773
779
|
callback: captureChart
|
|
774
780
|
}
|
|
775
781
|
),
|
|
776
|
-
hasRenderedAnnotations ? /* @__PURE__ */
|
|
782
|
+
hasRenderedAnnotations ? /* @__PURE__ */ jsx5(
|
|
777
783
|
ChartAnnotationMarkerPortal,
|
|
778
784
|
{
|
|
779
785
|
annotationLookup,
|
|
@@ -782,7 +788,7 @@ function ChartRenderer({
|
|
|
782
788
|
plotHeight
|
|
783
789
|
}
|
|
784
790
|
) : null,
|
|
785
|
-
chart ? /* @__PURE__ */
|
|
791
|
+
chart ? /* @__PURE__ */ jsx5(
|
|
786
792
|
ChartTooltipPortal,
|
|
787
793
|
{
|
|
788
794
|
chart,
|
|
@@ -807,11 +813,13 @@ function ChartRenderer({
|
|
|
807
813
|
color: ctx.point.color,
|
|
808
814
|
name: ctx.point.name,
|
|
809
815
|
value: ctx.point.y,
|
|
810
|
-
percent: ctx.point.percentage
|
|
816
|
+
percent: ctx.point.percentage,
|
|
817
|
+
// Icon indexed by the hovered slice — same source the legend reads.
|
|
818
|
+
icon: series[ctx.point.index]?.icon
|
|
811
819
|
}
|
|
812
820
|
] : (
|
|
813
|
-
// Drop v1's `readonly`
|
|
814
|
-
//
|
|
821
|
+
// Drop v1's `readonly` wrapper (v2 is mutable); icon is forwarded
|
|
822
|
+
// from `series[]` by index below since the helper doesn't carry it.
|
|
815
823
|
transformTimeSeriesTooltipData({
|
|
816
824
|
context,
|
|
817
825
|
data: series.map((s, i) => ({
|
|
@@ -819,10 +827,11 @@ function ChartRenderer({
|
|
|
819
827
|
points: [],
|
|
820
828
|
styles: { color: s.color ?? colors[i] ?? "" }
|
|
821
829
|
}))
|
|
822
|
-
}).map((row) => ({
|
|
830
|
+
}).map((row, i) => ({
|
|
823
831
|
color: row.color,
|
|
824
832
|
name: row.name,
|
|
825
|
-
value: row.value
|
|
833
|
+
value: row.value,
|
|
834
|
+
icon: series[i]?.icon
|
|
826
835
|
}))
|
|
827
836
|
);
|
|
828
837
|
const position = isPie || isPackedBubble ? ctx.key ?? ctx.point.name : context.x;
|
|
@@ -850,7 +859,7 @@ function ChartRenderer({
|
|
|
850
859
|
}
|
|
851
860
|
}
|
|
852
861
|
) : null,
|
|
853
|
-
hideLegend ? null : /* @__PURE__ */
|
|
862
|
+
hideLegend ? null : /* @__PURE__ */ jsx5("div", { className: "seeds-chart-legend", children: /* @__PURE__ */ jsx5(
|
|
854
863
|
SeriesLegend,
|
|
855
864
|
{
|
|
856
865
|
items: series.map((s, i) => ({
|
|
@@ -904,4 +913,4 @@ export {
|
|
|
904
913
|
ChartRenderer,
|
|
905
914
|
buildBaseChartOptions
|
|
906
915
|
};
|
|
907
|
-
//# sourceMappingURL=chunk-
|
|
916
|
+
//# sourceMappingURL=chunk-EWAD675C.js.map
|