@sproutsocial/seeds-react-data-viz 0.18.0 → 0.20.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.
- package/dist/bar/index.d.mts +20 -4
- package/dist/bar/index.d.ts +20 -4
- package/dist/bar/index.js +53 -85
- package/dist/bar/index.js.map +1 -1
- package/dist/bar.css +39 -0
- package/dist/chart-styles.css +295 -0
- package/dist/charts.css +583 -0
- package/dist/{chunk-XP7HNV23.js → chunk-27M4FDNK.js} +16 -17
- package/dist/chunk-27M4FDNK.js.map +1 -0
- package/dist/chunk-46L4YBLC.js +544 -0
- package/dist/chunk-46L4YBLC.js.map +1 -0
- package/dist/chunk-6EIJCJCN.js +22 -0
- package/dist/chunk-6EIJCJCN.js.map +1 -0
- package/dist/{chunk-GVAMWFB7.js → chunk-XYE6O77Z.js} +3 -3
- package/dist/{chunk-GVAMWFB7.js.map → chunk-XYE6O77Z.js.map} +1 -1
- package/dist/donut/index.d.mts +21 -4
- package/dist/donut/index.d.ts +21 -4
- package/dist/donut/index.js +39 -49
- package/dist/donut/index.js.map +1 -1
- package/dist/donut.css +45 -0
- package/dist/esm/bar/index.js +42 -74
- package/dist/esm/bar/index.js.map +1 -1
- package/dist/esm/{chunk-X2KAXY3P.js → chunk-KMFRRUTY.js} +2 -2
- package/dist/esm/chunk-P3MVYSHX.js +22 -0
- package/dist/esm/chunk-P3MVYSHX.js.map +1 -0
- package/dist/esm/{chunk-JLFXOEV2.js → chunk-QSSYSKRP.js} +3 -4
- package/dist/esm/chunk-QSSYSKRP.js.map +1 -0
- package/dist/esm/chunk-XEKQTAUH.js +544 -0
- package/dist/esm/chunk-XEKQTAUH.js.map +1 -0
- package/dist/esm/donut/index.js +38 -48
- package/dist/esm/donut/index.js.map +1 -1
- package/dist/esm/index.js +536 -134
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +30 -21
- package/dist/esm/line-area/index.js.map +1 -1
- package/dist/esm/sparkline/index.js +2 -2
- package/dist/index.js +497 -95
- package/dist/index.js.map +1 -1
- package/dist/interactions-DoWoL7bu.d.mts +29 -0
- package/dist/interactions-DoWoL7bu.d.ts +29 -0
- package/dist/line-area/index.d.mts +30 -4
- package/dist/line-area/index.d.ts +30 -4
- package/dist/line-area/index.js +35 -26
- package/dist/line-area/index.js.map +1 -1
- package/dist/line-area.css +112 -0
- package/dist/sparkline/index.js +4 -4
- package/package.json +16 -7
- package/dist/chunk-WEKDYQ4T.js +0 -968
- package/dist/chunk-WEKDYQ4T.js.map +0 -1
- package/dist/chunk-XP7HNV23.js.map +0 -1
- package/dist/esm/chunk-JLFXOEV2.js.map +0 -1
- package/dist/esm/chunk-Z4LOM4OZ.js +0 -968
- package/dist/esm/chunk-Z4LOM4OZ.js.map +0 -1
- /package/dist/esm/{chunk-X2KAXY3P.js.map → chunk-KMFRRUTY.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-XYE6O77Z.js","../src/charts/shared/annotations.ts","../src/charts/shared/valueAxisLabelFormatter.ts"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B;AACA;ACkCO,SAAS,qBAAA,CACd,WAAA,EAIA;AACA,EAAA,GAAA,CAAI,iBAAC,WAAA,2BAAa,QAAA,EAAQ;AACxB,IAAA,OAAO,EAAE,WAAA,EAAa,KAAA,CAAA,EAAW,MAAA,EAAQ,KAAA,EAAU,CAAA;AAAA,EACrD;AACA,EAAA,MAAM,OAAA,EAGA,CAAC,CAAA;AACP,EAAA,MAAM,OAAA,kBAAgC,IAAI,GAAA,CAAI,CAAA;AAC9C,EAAA,IAAA,CAAA,MAAW,WAAA,GAAc,WAAA,EAAa;AACpC,IAAA,MAAM,EAAE,SAAS,EAAA,EAAI,UAAA;AACrB,IAAA,MAAA,CAAO,IAAA,CAAK;AAAA;AAAA,MAEV,KAAA,EAAO,EAAE,CAAA,EAAG,QAAA,EAAU,CAAA,EAAG,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,EAAE,CAAA;AAAA;AAAA,MAE/C,IAAA,EAAM;AAAA,IACR,CAAC,CAAA;AAID,IAAA,MAAA,CAAO,GAAA,CAAI,QAAA,EAAU,UAAU,CAAA;AAAA,EACjC;AACA,EAAA,GAAA,CAAI,MAAA,CAAO,OAAA,IAAW,CAAA,EAAG;AACvB,IAAA,OAAO,EAAE,WAAA,EAAa,KAAA,CAAA,EAAW,MAAA,EAAQ,KAAA,EAAU,CAAA;AAAA,EACrD;AACA,EAAA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAA,EAAa,CAAC,EAAE,MAAA,EAAQ,YAAA,EAAc,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAS,EAAE,EAAE,CAAC,CAAA;AAAA,IACrE;AAAA,EACF,CAAA;AACF;AD3CA;AACA;AEjCA,sEAA8B;AAW9B,IAAM,aAAA,EAAe,OAAA;AAWrB,SAAS,yBAAA,CACP,OAAA,EACkB;AAClB,EAAA,MAAM,cAAA,EAAgB,OAAA,CAAQ,IAAA,CAAK,aAAA;AACnC,EAAA,MAAM,SAAA,EACJ,cAAA,GAAiB,aAAA,CAAc,OAAA,EAAS,EAAA,EACpC,aAAA,CAAc,aAAA,CAAc,OAAA,EAAS,CAAC,EAAA,EACtC,KAAA,CAAA;AACN,EAAA,OAAO,OAAO,SAAA,IAAa,SAAA,GAAY,SAAA,EAAW,KAAA,EAAO,IAAA,EAAO,IAAA;AAClE;AAWO,SAAS,8BAAA,CAAA,EAEN;AACR,EAAA,MAAM,YAAA,EAAc,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AAErC,EAAA,GAAA,CAAI,YAAA,IAAgB,CAAA,EAAG;AACrB,IAAA,OAAO,8CAAA,EAAgB,MAAA,EAAQ,YAAA,EAAc,MAAA,EAAQ,EAAE,CAAC,CAAA;AAAA,EAC1D;AAEA,EAAA,MAAM,WAAA,EAAa,yBAAA,CAA0B,IAAI,CAAA;AAEjD,EAAA,OAAO,8CAAA;AAAc,IACnB,UAAA;AAAA,IACA,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,YAAA;AAAA,IACR,MAAA,EAAQ;AAAA,EACV,CAAC,CAAA;AACH;AAYO,SAAS,2BAAA,CAA4B,MAAA,EAAqB;AAC/D,EAAA,OAAO,QAAA,CAAA,EAAwD;AAC7D,IAAA,MAAM,YAAA,EAAc,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA;AAMrC,IAAA,MAAM,WAAA,EACJ,MAAA,CAAO,WAAA,IAAe,MAAA,EAAQ,MAAA,EAAQ,yBAAA,CAA0B,IAAI,CAAA;AAEtE,IAAA,OAAO,6CAAA,EAAiB,GAAG,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAa,WAAW,CAAC,CAAA;AAAA,EACrE,CAAA;AACF;AFvBA;AACA;AACE;AACA;AACA;AACF,kMAAC","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-XYE6O77Z.js","sourcesContent":[null,"// Shared annotation plumbing across v2 chart families. Currently consumed by\n// BarChart; v2 Line/Area will share the same `annotations` shape and reuse\n// `buildAnnotationConfig` directly. Annotation data is purely numeric —\n// the module has no knowledge of `categories`; resolving a numeric position to\n// a display name is the tooltip's job (see chartBase `renderContent`).\n\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport type { SeedsChartAnnotationsOptions } from \"./chartBase\";\n\n/**\n * Annotations keyed by the numeric Highcharts index. Both consumers resolve\n * numerically: the marker portal reads `label.point.x` and the tooltip reads\n * `context.point.x` (numeric on both category and datetime axes).\n */\nexport type ChartAnnotationLookup = Map<number, ChartAnnotation>;\n\n/**\n * Declarative annotation shape — the DS renders the marker and tooltip header\n * internally; consumers don't supply render functions. See CE-7.\n */\nexport interface ChartAnnotation {\n /** Numeric x-axis coordinate — a category index (category axes) or the raw coordinate (datetime/linear axes). */\n position: number;\n /** Icon shown above the chart at `position` and inline with `title` in the tooltip header. */\n icon?: TypeIconName;\n /** Color applied to the marker's vertical line. */\n color?: string;\n /** Tooltip header line 1. */\n title?: string;\n /** Tooltip header line 2. */\n description?: string;\n}\n\n/**\n * Build the Highcharts `annotations` config and a parallel lookup keyed by the\n * numeric `position`. Both consumers (chart adapter for Highcharts, ChartRenderer\n * for the portal + tooltip) read from the same numeric lookup to stay aligned.\n */\nexport function buildAnnotationConfig(\n annotations: ChartAnnotation[] | undefined\n): {\n annotations: SeedsChartAnnotationsOptions[] | undefined;\n lookup: ChartAnnotationLookup | undefined;\n} {\n if (!annotations?.length) {\n return { annotations: undefined, lookup: undefined };\n }\n const labels: {\n point: { x: number; y: number; xAxis: 0; yAxis: 0 };\n text: string;\n }[] = [];\n const lookup: ChartAnnotationLookup = new Map();\n for (const annotation of annotations) {\n const { position } = annotation;\n labels.push({\n // Highcharts anchor — always uses `x` regardless of chart orientation.\n point: { x: position, y: 0, xAxis: 0, yAxis: 0 },\n // Space (not empty) — Highcharts reverts to its built-in label text on empty string.\n text: \" \",\n });\n // Keyed by the numeric position only. The marker portal reads\n // `label.point.x` and the tooltip reads `context.point.x` — both numeric on\n // every axis type, so no category-name keying is needed.\n lookup.set(position, annotation);\n }\n if (labels.length === 0) {\n return { annotations: undefined, lookup: undefined };\n }\n return {\n // `useHTML: true` makes Highcharts attach an HTML `graphic.div` to each\n // label, which the marker portal needs as its render target. `padding: 0`\n // removes Highcharts' default left padding so markers stay centered.\n annotations: [{ labels, labelOptions: { useHTML: true, padding: 0 } }],\n lookup,\n };\n}\n","import { formatNumeral } from \"@sproutsocial/seeds-react-numeral\";\n\nimport type { SeedsAxisLabelFormatterContext } from \"./chartBase\";\nimport { valueFormatter, type ValueFormat } from \"./formatters/valueFormatter\";\n\n/**\n * Fixed internal locale for the default value-axis formatter. Pins the en-US\n * compact symbols (2K / 1.2M / 1.2B) so output is deterministic regardless of\n * the environment's locale resolution.\n * TODO: consumer-facing locale and an override surface may be added later.\n */\nconst FIXED_LOCALE = \"en-US\";\n\n/**\n * Derive formatNumeral's `abbreviate` threshold from the axis tick scan.\n *\n * formatNumeral abbreviates above 10,000 by default; passing a numeric\n * `abbreviate` lowers that threshold to that value. When the top tick exceeds\n * 9,999 we lower it to 1,000 so the whole axis reads \"2K 4K 6K 8K 10K\" rather\n * than a mixed \"2,000 4,000 6,000 8,000 10K\". Otherwise `true` keeps the default\n * 10,000 threshold. Centralizes the 9,999 rule for both formatters below.\n */\nfunction deriveAbbreviateFromTicks(\n context: SeedsAxisLabelFormatterContext\n): boolean | number {\n const tickPositions = context.axis.tickPositions;\n const maxValue =\n tickPositions && tickPositions.length > 0\n ? tickPositions[tickPositions.length - 1]\n : undefined;\n return typeof maxValue === \"number\" && maxValue > 9999 ? 1000 : true;\n}\n\n/**\n * Internal, zero-config default value-axis label formatter for v2 chart\n * families. Abbreviates value-axis ticks (1.20K / 1.20M / 1.20B); decimal mode\n * only. Zero renders \"0\". Decimal compact precision is fixed at two fraction\n * digits, so abbreviated ticks always carry two decimals.\n *\n * Wired as a Highcharts `yAxis.labels.formatter`, invoked `this`-bound with the\n * Seeds-local context.\n */\nexport function defaultValueAxisLabelFormatter(\n this: SeedsAxisLabelFormatterContext\n): string {\n const numberValue = Number(this.value);\n\n if (numberValue === 0) {\n return formatNumeral({ locale: FIXED_LOCALE, number: 0 });\n }\n\n const abbreviate = deriveAbbreviateFromTicks(this);\n\n return formatNumeral({\n abbreviate,\n format: \"decimal\",\n locale: FIXED_LOCALE,\n number: numberValue,\n });\n}\n\n/**\n * Build a `format`-driven value-axis label formatter that runs a declarative\n * {@link ValueFormat} through the shared {@link valueFormatter}. Reuses the same\n * `tickPositions` scan as {@link defaultValueAxisLabelFormatter} so the\n * axis-wide \"smart 1k/10k\" abbreviation is preserved for decimal/currency ticks.\n *\n * Wired as a Highcharts `yAxis.labels.formatter`; invoked `this`-bound with the\n * Seeds-local context. The returned formatter never carries chart-engine types,\n * keeping the engine boundary intact.\n */\nexport function makeValueAxisLabelFormatter(format: ValueFormat) {\n return function (this: SeedsAxisLabelFormatterContext): string {\n const numberValue = Number(this.value);\n\n // Honor an explicit `abbreviate: false` opt-out; otherwise derive the\n // threshold from the same tick scan as the default formatter (abbreviation\n // only affects decimal/currency — percent and duration ignore it inside\n // valueFormatter).\n const abbreviate =\n format.abbreviate === false ? false : deriveAbbreviateFromTicks(this);\n\n return valueFormatter({ ...format, value: numberValue, abbreviate });\n };\n}\n"]}
|
package/dist/donut/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
4
4
|
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-Cn_5CUJi.mjs';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
|
|
6
|
+
import { C as ChartClickHandler, a as ChartHoverHandler } from '../interactions-DoWoL7bu.mjs';
|
|
6
7
|
import '../types-DxrhdAdn.mjs';
|
|
7
8
|
import 'highcharts';
|
|
8
9
|
|
|
@@ -36,9 +37,17 @@ interface DonutChartProps {
|
|
|
36
37
|
/** Override for the value shown when a data point is `null`. Defaults to an em-dash. */
|
|
37
38
|
invalidNumberLabel?: ReactNode;
|
|
38
39
|
/** Click handler invoked with the `name` of the clicked slice. */
|
|
39
|
-
onClick?:
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
onClick?: ChartClickHandler<string>;
|
|
41
|
+
/**
|
|
42
|
+
* Fired when the pointer enters a slice (also on keyboard focus), with the
|
|
43
|
+
* slice `name` as `position`.
|
|
44
|
+
*/
|
|
45
|
+
onMouseEnter?: ChartHoverHandler<string>;
|
|
46
|
+
/**
|
|
47
|
+
* Fired when the pointer leaves a slice (also on keyboard blur), with the
|
|
48
|
+
* slice `name` as `position`.
|
|
49
|
+
*/
|
|
50
|
+
onMouseLeave?: ChartHoverHandler<string>;
|
|
42
51
|
/**
|
|
43
52
|
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
44
53
|
* *not* render on screen. The on-screen title is a React sibling outside the
|
|
@@ -50,6 +59,14 @@ interface DonutChartProps {
|
|
|
50
59
|
onReady?: (handle: ChartExportHandle) => void;
|
|
51
60
|
}
|
|
52
61
|
|
|
62
|
+
/**
|
|
63
|
+
* DonutChart renders a donut (ring) chart from a flat list of named values.
|
|
64
|
+
*
|
|
65
|
+
* Like SparklineChart, it carries no `styled-components`: the wrapper is a plain
|
|
66
|
+
* `<div>` and the Highcharts styling ships as static CSS. Consumers import both
|
|
67
|
+
* `@sproutsocial/seeds-react-data-viz/chart-styles.css` and `.../donut.css` once
|
|
68
|
+
* (the component never self-imports its CSS).
|
|
69
|
+
*/
|
|
53
70
|
declare const DonutChart: react.NamedExoticComponent<DonutChartProps>;
|
|
54
71
|
|
|
55
|
-
export { ChartExportHandle, DonutChart, type DonutChartProps, type DonutChartTooltipProps, type DonutChartTooltipRow, type DonutDataPoint, ValueFormat };
|
|
72
|
+
export { ChartClickHandler, ChartExportHandle, ChartHoverHandler, DonutChart, type DonutChartProps, type DonutChartTooltipProps, type DonutChartTooltipRow, type DonutDataPoint, ValueFormat };
|
package/dist/donut/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
4
4
|
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-C-l7yYGx.js';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
|
|
6
|
+
import { C as ChartClickHandler, a as ChartHoverHandler } from '../interactions-DoWoL7bu.js';
|
|
6
7
|
import '../types-DxrhdAdn.js';
|
|
7
8
|
import 'highcharts';
|
|
8
9
|
|
|
@@ -36,9 +37,17 @@ interface DonutChartProps {
|
|
|
36
37
|
/** Override for the value shown when a data point is `null`. Defaults to an em-dash. */
|
|
37
38
|
invalidNumberLabel?: ReactNode;
|
|
38
39
|
/** Click handler invoked with the `name` of the clicked slice. */
|
|
39
|
-
onClick?:
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
onClick?: ChartClickHandler<string>;
|
|
41
|
+
/**
|
|
42
|
+
* Fired when the pointer enters a slice (also on keyboard focus), with the
|
|
43
|
+
* slice `name` as `position`.
|
|
44
|
+
*/
|
|
45
|
+
onMouseEnter?: ChartHoverHandler<string>;
|
|
46
|
+
/**
|
|
47
|
+
* Fired when the pointer leaves a slice (also on keyboard blur), with the
|
|
48
|
+
* slice `name` as `position`.
|
|
49
|
+
*/
|
|
50
|
+
onMouseLeave?: ChartHoverHandler<string>;
|
|
42
51
|
/**
|
|
43
52
|
* Chart title included in the exported image (PNG/SVG/PDF) only — it does
|
|
44
53
|
* *not* render on screen. The on-screen title is a React sibling outside the
|
|
@@ -50,6 +59,14 @@ interface DonutChartProps {
|
|
|
50
59
|
onReady?: (handle: ChartExportHandle) => void;
|
|
51
60
|
}
|
|
52
61
|
|
|
62
|
+
/**
|
|
63
|
+
* DonutChart renders a donut (ring) chart from a flat list of named values.
|
|
64
|
+
*
|
|
65
|
+
* Like SparklineChart, it carries no `styled-components`: the wrapper is a plain
|
|
66
|
+
* `<div>` and the Highcharts styling ships as static CSS. Consumers import both
|
|
67
|
+
* `@sproutsocial/seeds-react-data-viz/chart-styles.css` and `.../donut.css` once
|
|
68
|
+
* (the component never self-imports its CSS).
|
|
69
|
+
*/
|
|
53
70
|
declare const DonutChart: react.NamedExoticComponent<DonutChartProps>;
|
|
54
71
|
|
|
55
|
-
export { ChartExportHandle, DonutChart, type DonutChartProps, type DonutChartTooltipProps, type DonutChartTooltipRow, type DonutDataPoint, ValueFormat };
|
|
72
|
+
export { ChartClickHandler, ChartExportHandle, ChartHoverHandler, DonutChart, type DonutChartProps, type DonutChartTooltipProps, type DonutChartTooltipRow, type DonutDataPoint, ValueFormat };
|
package/dist/donut/index.js
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
|
|
2
2
|
|
|
3
3
|
var _chunkCYQXUAJCjs = require('../chunk-CYQXUAJC.js');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
var _chunk6EIJCJCNjs = require('../chunk-6EIJCJCN.js');
|
|
6
7
|
|
|
7
8
|
|
|
8
|
-
var _chunkXP7HNV23js = require('../chunk-XP7HNV23.js');
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _chunk27M4FDNKjs = require('../chunk-27M4FDNK.js');
|
|
12
|
+
require('../chunk-46L4YBLC.js');
|
|
12
13
|
|
|
13
14
|
// src/charts/donut/DonutChart.tsx
|
|
14
15
|
var _react = require('react');
|
|
15
16
|
|
|
16
17
|
// src/charts/donut/adapter.ts
|
|
17
18
|
function buildDonutOptions(props, colors) {
|
|
18
|
-
const base =
|
|
19
|
+
const base = _chunk27M4FDNKjs.buildBaseChartOptions.call(void 0, {
|
|
19
20
|
type: "pie",
|
|
20
21
|
description: props.description
|
|
21
22
|
});
|
|
@@ -40,12 +41,18 @@ function buildDonutOptions(props, colors) {
|
|
|
40
41
|
borderRadius: 0,
|
|
41
42
|
dataLabels: { enabled: false },
|
|
42
43
|
innerSize: "50%",
|
|
43
|
-
...props.onClick ? {
|
|
44
|
+
...props.onClick || props.onMouseEnter || props.onMouseLeave ? {
|
|
44
45
|
point: {
|
|
45
46
|
events: {
|
|
46
|
-
click() {
|
|
47
|
-
|
|
48
|
-
}
|
|
47
|
+
click: props.onClick ? function() {
|
|
48
|
+
props.onClick({ position: this.name });
|
|
49
|
+
} : void 0,
|
|
50
|
+
mouseOver: props.onMouseEnter ? function() {
|
|
51
|
+
props.onMouseEnter({ position: this.name });
|
|
52
|
+
} : void 0,
|
|
53
|
+
mouseOut: props.onMouseLeave ? function() {
|
|
54
|
+
props.onMouseLeave({ position: this.name });
|
|
55
|
+
} : void 0
|
|
49
56
|
}
|
|
50
57
|
}
|
|
51
58
|
} : {}
|
|
@@ -65,25 +72,10 @@ function buildDonutOptions(props, colors) {
|
|
|
65
72
|
};
|
|
66
73
|
}
|
|
67
74
|
|
|
68
|
-
// src/charts/donut/styles.ts
|
|
69
|
-
var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
|
|
70
|
-
var DonutChartContainer = _styledcomponents2.default.div`
|
|
71
|
-
background-color: ${({ theme }) => theme.colors.container.background.base};
|
|
72
|
-
${_chunkWEKDYQ4Tjs.donutChartStyles}
|
|
73
|
-
|
|
74
|
-
/* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to
|
|
75
|
-
all pie points except the hovered one. In styledMode, opacity is CSS-only
|
|
76
|
-
(JS plotOptions.states.inactive.opacity is ignored). */
|
|
77
|
-
.highcharts-pie-series .highcharts-point-inactive {
|
|
78
|
-
opacity: 0.3;
|
|
79
|
-
transition: opacity 0s;
|
|
80
|
-
}
|
|
81
|
-
`;
|
|
82
|
-
|
|
83
75
|
// src/charts/donut/DonutChart.tsx
|
|
84
76
|
var _jsxruntime = require('react/jsx-runtime');
|
|
85
77
|
var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
86
|
-
const { colors } =
|
|
78
|
+
const { colors } = _chunk27M4FDNKjs.useSeedsChartSetup.call(void 0, {
|
|
87
79
|
series: props.data.map((d) => ({ color: d.color }))
|
|
88
80
|
});
|
|
89
81
|
const options = _react.useMemo.call(void 0,
|
|
@@ -91,34 +83,32 @@ var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
|
91
83
|
[props, colors]
|
|
92
84
|
);
|
|
93
85
|
const hasOnClick = Boolean(props.onClick);
|
|
86
|
+
const containerProps = _chunk6EIJCJCNjs.getChartContainerProps.call(void 0, {
|
|
87
|
+
familyClasses: ["seeds-chart-donut"],
|
|
88
|
+
colors: props.data.map((d) => d.color),
|
|
89
|
+
hasOnClick,
|
|
90
|
+
className: props.className
|
|
91
|
+
});
|
|
94
92
|
const tooltip = props.tooltip ? (args) => props.tooltip(args) : void 0;
|
|
95
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
96
|
-
|
|
93
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...containerProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
94
|
+
_chunk27M4FDNKjs.ChartRenderer,
|
|
97
95
|
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
hasOnClick,
|
|
113
|
-
tooltipClickLabel: props.tooltipClickLabel,
|
|
114
|
-
invalidNumberLabel: props.invalidNumberLabel,
|
|
115
|
-
valueFormat: props.format,
|
|
116
|
-
exportTitle: props.exportTitle,
|
|
117
|
-
onReady: props.onReady
|
|
118
|
-
}
|
|
119
|
-
)
|
|
96
|
+
options,
|
|
97
|
+
series: props.data.map((d, i) => ({
|
|
98
|
+
name: d.name,
|
|
99
|
+
color: colors[i],
|
|
100
|
+
icon: d.icon
|
|
101
|
+
})),
|
|
102
|
+
colors,
|
|
103
|
+
tooltip,
|
|
104
|
+
hasOnClick,
|
|
105
|
+
tooltipClickLabel: props.tooltipClickLabel,
|
|
106
|
+
invalidNumberLabel: props.invalidNumberLabel,
|
|
107
|
+
valueFormat: props.format,
|
|
108
|
+
exportTitle: props.exportTitle,
|
|
109
|
+
onReady: props.onReady
|
|
120
110
|
}
|
|
121
|
-
);
|
|
111
|
+
) });
|
|
122
112
|
});
|
|
123
113
|
|
|
124
114
|
|
package/dist/donut/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/donut/index.js","../../src/charts/donut/DonutChart.tsx","../../src/charts/donut/adapter.ts"
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/donut/index.js","../../src/charts/donut/DonutChart.tsx","../../src/charts/donut/adapter.ts"],"names":["DonutChart"],"mappings":"AAAA;AACE;AACF,uDAA6B;AAC7B;AACE;AACF,uDAA6B;AAC7B;AACE;AACA;AACA;AACF,uDAA6B;AAC7B,gCAA6B;AAC7B;AACA;ACbA,8BAA8B;ADe9B;AACA;AEXO,SAAS,iBAAA,CACd,KAAA,EACA,MAAA,EACmB;AACnB,EAAA,MAAM,KAAA,EAAO,oDAAA;AAAsB,IACjC,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA,CAAM;AAAA,EACrB,CAAC,CAAA;AACD,EAAA,OAAO;AAAA,IACL,GAAG,IAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,KAAA;AAAA,MACN,UAAA,EAAY,IAAA;AAAA,MACZ,SAAA,EAAW,KAAA;AAAA;AAAA;AAAA;AAAA,MAIX,MAAA,EAAQ,mCAAA;AAAA;AAAA,MAER,OAAA,EAAS,CAAC,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAC;AAAA,IACtB,CAAA;AAAA,IACA,WAAA,EAAa;AAAA,MACX,GAAA,EAAK;AAAA,QACH,SAAA,EAAW,KAAA;AAAA;AAAA;AAAA,QAGX,YAAA,EAAc,CAAA;AAAA,QACd,UAAA,EAAY,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,QAC7B,SAAA,EAAW,KAAA;AAAA,QACX,GAAI,KAAA,CAAM,QAAA,GAAW,KAAA,CAAM,aAAA,GAAgB,KAAA,CAAM,aAAA,EAC7C;AAAA,UACE,KAAA,EAAO;AAAA,YACL,MAAA,EAAQ;AAAA,cACN,KAAA,EAAO,KAAA,CAAM,QAAA,EACT,QAAA,CAAA,EAAkC;AAChC,gBAAA,KAAA,CAAM,OAAA,CAAS,EAAE,QAAA,EAAU,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,cACxC,EAAA,EACA,KAAA,CAAA;AAAA,cACJ,SAAA,EAAW,KAAA,CAAM,aAAA,EACb,QAAA,CAAA,EAAkC;AAChC,gBAAA,KAAA,CAAM,YAAA,CAAc,EAAE,QAAA,EAAU,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,cAC7C,EAAA,EACA,KAAA,CAAA;AAAA,cACJ,QAAA,EAAU,KAAA,CAAM,aAAA,EACZ,QAAA,CAAA,EAAkC;AAChC,gBAAA,KAAA,CAAM,YAAA,CAAc,EAAE,QAAA,EAAU,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,cAC7C,EAAA,EACA,KAAA;AAAA,YACN;AAAA,UACF;AAAA,QACF,EAAA,EACA,CAAC;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,MAAA,EAAQ;AAAA,MACN;AAAA,QACE,IAAA,EAAM,KAAA;AAAA,QACN,IAAA,EAAM,MAAA;AAAA,QACN,IAAA,EAAM,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,EAAA,GAAA,CAAO;AAAA,UAC9B,IAAA,EAAM,CAAA,CAAE,IAAA;AAAA,UACR,CAAA,EAAG,CAAA,CAAE,KAAA;AAAA,UACL,KAAA,oCAAO,CAAA,CAAE,KAAA,UAAS,MAAA,CAAO,CAAC,GAAA,UAAK;AAAA,QACjC,CAAA,CAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAA;AACF;AFEA;AACA;ACrBM,+CAAA;AAnCC,IAAM,WAAA,EAAa,yBAAA,SAAcA,WAAAA,CAAW,KAAA,EAAwB;AAGzE,EAAA,MAAM,EAAE,OAAO,EAAA,EAAI,iDAAA;AAAmB,IACpC,MAAA,EAAQ,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,EAAA,GAAA,CAAO,EAAE,KAAA,EAAO,CAAA,CAAE,MAAM,CAAA,CAAE;AAAA,EACpD,CAAC,CAAA;AAGD,EAAA,MAAM,QAAA,EAAU,4BAAA;AAAA,IACd,CAAA,EAAA,GAAM,iBAAA,CAAkB,KAAA,EAAO,MAAM,CAAA;AAAA,IACrC,CAAC,KAAA,EAAO,MAAM;AAAA,EAChB,CAAA;AACA,EAAA,MAAM,WAAA,EAAa,OAAA,CAAQ,KAAA,CAAM,OAAO,CAAA;AAMxC,EAAA,MAAM,eAAA,EAAiB,qDAAA;AAAuB,IAC5C,aAAA,EAAe,CAAC,mBAAmB,CAAA;AAAA,IACnC,MAAA,EAAQ,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,EAAA,GAAM,CAAA,CAAE,KAAK,CAAA;AAAA,IACrC,UAAA;AAAA,IACA,SAAA,EAAW,KAAA,CAAM;AAAA,EACnB,CAAC,CAAA;AAKD,EAAA,MAAM,QAAA,EAAU,KAAA,CAAM,QAAA,EAClB,CAAC,IAAA,EAAA,GACC,KAAA,CAAM,OAAA,CAAS,IAAyC,EAAA,EAC1D,KAAA,CAAA;AAEJ,EAAA,uBACE,6BAAA,KAAC,EAAA,EAAK,GAAG,cAAA,EACP,QAAA,kBAAA,6BAAA;AAAA,IAAC,8BAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,MAAA,EAAQ,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,EAAA,GAAA,CAAO;AAAA,QAChC,IAAA,EAAM,CAAA,CAAE,IAAA;AAAA,QACR,KAAA,EAAO,MAAA,CAAO,CAAC,CAAA;AAAA,QACf,IAAA,EAAM,CAAA,CAAE;AAAA,MACV,CAAA,CAAE,CAAA;AAAA,MACF,MAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA,EAAmB,KAAA,CAAM,iBAAA;AAAA,MACzB,kBAAA,EAAoB,KAAA,CAAM,kBAAA;AAAA,MAC1B,WAAA,EAAa,KAAA,CAAM,MAAA;AAAA,MACnB,WAAA,EAAa,KAAA,CAAM,WAAA;AAAA,MACnB,OAAA,EAAS,KAAA,CAAM;AAAA,IAAA;AAAA,EACjB,EAAA,CACF,CAAA;AAEJ,CAAC,CAAA;ADyCD;AACE;AACF,gCAAC","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/donut/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport {\n useSeedsChartSetup,\n ChartRenderer,\n type ChartTooltipProps,\n} from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildDonutOptions } from \"./adapter\";\nimport type { DonutChartProps, DonutChartTooltipProps } from \"./types\";\n\n/**\n * DonutChart renders a donut (ring) chart from a flat list of named values.\n *\n * Like SparklineChart, it carries no `styled-components`: the wrapper is a plain\n * `<div>` and the Highcharts styling ships as static CSS. Consumers import both\n * `@sproutsocial/seeds-react-data-viz/chart-styles.css` and `.../donut.css` once\n * (the component never self-imports its CSS).\n */\nexport const DonutChart = memo(function DonutChart(props: DonutChartProps) {\n // Map each data item to { color? } so useSeedsChartSetup resolves the palette\n // used for the Highcharts options and the legend swatches.\n const { colors } = useSeedsChartSetup({\n series: props.data.map((d) => ({ color: d.color })),\n });\n\n // Memoize to avoid spurious Highcharts redraws on parent re-renders.\n const options = useMemo(\n () => buildDonutOptions(props, colors),\n [props, colors]\n );\n const hasOnClick = Boolean(props.onClick);\n\n // Container props from the shared contract. RAW per-series colors only —\n // an unset series falls through to chart-styles.css's --highcharts-color-N\n // default (the DS data-viz palette, light/dark-correct), matching the\n // bar/line-area convention. Only an explicit consumer override is inlined.\n const containerProps = getChartContainerProps({\n familyClasses: [\"seeds-chart-donut\"],\n colors: props.data.map((d) => d.color),\n hasOnClick,\n className: props.className,\n });\n\n // `ChartRenderer` expects `(ChartTooltipProps) => ReactNode`. The consumer's\n // function expects the narrower `DonutChartTooltipProps` (required `percent`).\n // Wrap rather than cast the function type so the intent is explicit.\n const tooltip = props.tooltip\n ? (args: ChartTooltipProps) =>\n props.tooltip!(args as unknown as DonutChartTooltipProps)\n : undefined;\n\n return (\n <div {...containerProps}>\n <ChartRenderer\n options={options}\n series={props.data.map((d, i) => ({\n name: d.name,\n color: colors[i],\n icon: d.icon,\n }))}\n colors={colors}\n tooltip={tooltip}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.format}\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\n );\n});\n","import type { SeedsChartOptions } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { DONUT_CHART_HEIGHT } from \"../../constants/chartOptions\";\nimport type { DonutChartProps } from \"./types\";\n\nexport function buildDonutOptions(\n props: DonutChartProps,\n colors: ReadonlyArray<string>\n): SeedsChartOptions {\n const base = buildBaseChartOptions({\n type: \"pie\",\n description: props.description,\n });\n return {\n ...base,\n chart: {\n type: \"pie\" as const,\n styledMode: true,\n animation: false,\n // Height only — width is left fluid (v1 parity) so the chart fills its\n // container and the pie auto-centers. The container bounds the width (see\n // styles.ts) so the legend below wraps to the donut and centers with it.\n height: DONUT_CHART_HEIGHT,\n // Drop Highcharts' default spacing so the donut uses the full height.\n spacing: [0, 0, 0, 0],\n },\n plotOptions: {\n pie: {\n animation: false,\n // borderRadius must be set in JS, not CSS, because Highcharts computes\n // the arc path before applying it — CSS border-radius has no effect.\n borderRadius: 0,\n dataLabels: { enabled: false },\n innerSize: \"50%\",\n ...(props.onClick || props.onMouseEnter || props.onMouseLeave\n ? {\n point: {\n events: {\n click: props.onClick\n ? function (this: { name: string }) {\n props.onClick!({ position: this.name });\n }\n : undefined,\n mouseOver: props.onMouseEnter\n ? function (this: { name: string }) {\n props.onMouseEnter!({ position: this.name });\n }\n : undefined,\n mouseOut: props.onMouseLeave\n ? function (this: { name: string }) {\n props.onMouseLeave!({ position: this.name });\n }\n : undefined,\n },\n },\n }\n : {}),\n },\n },\n series: [\n {\n type: \"pie\",\n name: \"Data\",\n data: props.data.map((d, i) => ({\n name: d.name,\n y: d.value,\n color: d.color ?? colors[i] ?? \"\",\n })),\n },\n ],\n };\n}\n"]}
|
package/dist/donut.css
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Seeds DonutChart family styles.
|
|
3
|
+
*
|
|
4
|
+
* The donut-specific layer on top of the shared `chart-styles.css` foundation
|
|
5
|
+
* (CE-164). The base rules — the per-series color custom-property fill (default
|
|
6
|
+
* `--highcharts-color-N` resolves to the DS data-viz palette, light/dark-correct;
|
|
7
|
+
* an explicit consumer color overrides it), the chart background, annotation
|
|
8
|
+
* labels, and the clickable-cursor rules — live in `chart-styles.css` and are
|
|
9
|
+
* shared across every v2 family. This file adds only the pie rules unique to
|
|
10
|
+
* the donut, scoped under `.seeds-chart-donut`.
|
|
11
|
+
*
|
|
12
|
+
* Consumers import BOTH stylesheets once (the component never self-imports):
|
|
13
|
+
*
|
|
14
|
+
* import "@sproutsocial/seeds-react-data-viz/chart-styles.css";
|
|
15
|
+
* import "@sproutsocial/seeds-react-data-viz/donut.css";
|
|
16
|
+
*
|
|
17
|
+
* These rules are ported verbatim from the former `donutChartStyles`
|
|
18
|
+
* (chartStyles.ts) and the inline point-inactive block, so the output stays
|
|
19
|
+
* pixel-identical. (v1 still consumes those styled-components blocks — do not
|
|
20
|
+
* remove them.)
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/* Remove 250ms fade in/out when hovering over different donut chart slices. */
|
|
24
|
+
.seeds-chart-donut .highcharts-point {
|
|
25
|
+
transition: opacity 0s;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Remove stroke on donut slices. */
|
|
29
|
+
.seeds-chart-donut .highcharts-pie-series .highcharts-point {
|
|
30
|
+
stroke: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Don't reduce opacity when hovering (ported verbatim — fill-opacity: none is
|
|
34
|
+
an invalid value and effectively a no-op, kept for pixel-identical parity). */
|
|
35
|
+
.seeds-chart-donut .highcharts-point-hover {
|
|
36
|
+
fill-opacity: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Dim non-hovered slices. Highcharts adds .highcharts-point-inactive to all pie
|
|
40
|
+
points except the hovered one. In styledMode, opacity is CSS-only
|
|
41
|
+
(JS plotOptions.states.inactive.opacity is ignored). */
|
|
42
|
+
.seeds-chart-donut .highcharts-pie-series .highcharts-point-inactive {
|
|
43
|
+
opacity: 0.3;
|
|
44
|
+
transition: opacity 0s;
|
|
45
|
+
}
|
package/dist/esm/bar/index.js
CHANGED
|
@@ -2,7 +2,10 @@ import {
|
|
|
2
2
|
buildAnnotationConfig,
|
|
3
3
|
defaultValueAxisLabelFormatter,
|
|
4
4
|
makeValueAxisLabelFormatter
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-KMFRRUTY.js";
|
|
6
|
+
import {
|
|
7
|
+
getChartContainerProps
|
|
8
|
+
} from "../chunk-P3MVYSHX.js";
|
|
6
9
|
import {
|
|
7
10
|
buildDimensionalAxis,
|
|
8
11
|
resolveTooltipTimezone
|
|
@@ -11,10 +14,8 @@ import {
|
|
|
11
14
|
ChartRenderer,
|
|
12
15
|
buildBaseChartOptions,
|
|
13
16
|
useSeedsChartSetup
|
|
14
|
-
} from "../chunk-
|
|
15
|
-
import
|
|
16
|
-
timeSeriesChartStyles
|
|
17
|
-
} from "../chunk-Z4LOM4OZ.js";
|
|
17
|
+
} from "../chunk-QSSYSKRP.js";
|
|
18
|
+
import "../chunk-XEKQTAUH.js";
|
|
18
19
|
|
|
19
20
|
// src/charts/bar/BarChart.tsx
|
|
20
21
|
import { memo } from "react";
|
|
@@ -26,6 +27,7 @@ function highchartsType(direction) {
|
|
|
26
27
|
function buildBarChartOptions(props, direction, series = props.series) {
|
|
27
28
|
const chartType = highchartsType(direction);
|
|
28
29
|
const isDatetime = props.xAxis.type === "datetime";
|
|
30
|
+
const isMultiSeries = series.length > 1;
|
|
29
31
|
const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);
|
|
30
32
|
const { annotations, lookup: annotationLookup } = buildAnnotationConfig(
|
|
31
33
|
props.annotations
|
|
@@ -54,6 +56,14 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
54
56
|
click: props.onClick ? (event) => props.onClick({ position: event.point.x }) : void 0,
|
|
55
57
|
mouseOver: function() {
|
|
56
58
|
const x = this.x;
|
|
59
|
+
props.onMouseEnter?.({
|
|
60
|
+
position: x,
|
|
61
|
+
// Omit the key entirely (not `series: undefined`) for single-series
|
|
62
|
+
// so consumers testing `"series" in payload` see the contract.
|
|
63
|
+
...isMultiSeries ? {
|
|
64
|
+
series: { name: this.series.name, index: this.series.index }
|
|
65
|
+
} : {}
|
|
66
|
+
});
|
|
57
67
|
this.series.chart.series.forEach((s) => {
|
|
58
68
|
if (s.type !== chartType) return;
|
|
59
69
|
s.data.forEach((point) => {
|
|
@@ -63,6 +73,12 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
63
73
|
});
|
|
64
74
|
},
|
|
65
75
|
mouseOut: function() {
|
|
76
|
+
props.onMouseLeave?.({
|
|
77
|
+
position: this.x,
|
|
78
|
+
...isMultiSeries ? {
|
|
79
|
+
series: { name: this.series.name, index: this.series.index }
|
|
80
|
+
} : {}
|
|
81
|
+
});
|
|
66
82
|
this.series.chart.series.forEach((s) => {
|
|
67
83
|
if (s.type !== chartType) return;
|
|
68
84
|
s.data.forEach((point) => {
|
|
@@ -113,52 +129,6 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
113
129
|
return { options, annotationLookup, tooltipTimezone };
|
|
114
130
|
}
|
|
115
131
|
|
|
116
|
-
// src/charts/bar/styles.ts
|
|
117
|
-
import styled, { css as css2 } from "styled-components";
|
|
118
|
-
import { Box } from "@sproutsocial/seeds-react-box";
|
|
119
|
-
|
|
120
|
-
// src/charts/shared/styles.ts
|
|
121
|
-
import { css } from "styled-components";
|
|
122
|
-
var axisLabelV2Styles = css`
|
|
123
|
-
.highcharts-xaxis-labels,
|
|
124
|
-
.highcharts-yaxis-labels {
|
|
125
|
-
// SVG labels (styledMode): fill is the SVG text colour; color has no effect.
|
|
126
|
-
text {
|
|
127
|
-
font-family: ${({ theme }) => theme.fontFamily};
|
|
128
|
-
${({ theme }) => theme.typography[100]};
|
|
129
|
-
font-weight: ${({ theme }) => theme.fontWeights.normal};
|
|
130
|
-
fill: ${({ theme }) => theme.colors.text.subtext};
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
// Two-line stacked datetime label: the boundary token is an
|
|
134
|
-
// hc-axis-label-secondary tspan on a second line, rendered semibold.
|
|
135
|
-
.highcharts-xaxis-labels text tspan.hc-axis-label-secondary {
|
|
136
|
-
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
137
|
-
}
|
|
138
|
-
`;
|
|
139
|
-
|
|
140
|
-
// src/charts/bar/styles.ts
|
|
141
|
-
var barFamilyStyles = css2`
|
|
142
|
-
${timeSeriesChartStyles}
|
|
143
|
-
|
|
144
|
-
/*
|
|
145
|
-
When the chart container is hovered, dim all bars. Then restore opacity for
|
|
146
|
-
the hovered bar(s) — flagged with the bar-point-hover class by the adapter —
|
|
147
|
-
so the non-hovered bars fade out.
|
|
148
|
-
*/
|
|
149
|
-
.highcharts-container:hover .highcharts-point {
|
|
150
|
-
fill-opacity: 0.3;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.highcharts-point.bar-point-hover {
|
|
154
|
-
fill-opacity: 1 !important;
|
|
155
|
-
}
|
|
156
|
-
`;
|
|
157
|
-
var BarStyledBox = styled(Box)`
|
|
158
|
-
${barFamilyStyles}
|
|
159
|
-
${axisLabelV2Styles}
|
|
160
|
-
`;
|
|
161
|
-
|
|
162
132
|
// src/charts/constants.ts
|
|
163
133
|
var BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
|
|
164
134
|
|
|
@@ -179,31 +149,29 @@ var BarChart = memo(function BarChart2(props) {
|
|
|
179
149
|
series
|
|
180
150
|
);
|
|
181
151
|
const hasOnClick = Boolean(props.onClick);
|
|
182
|
-
|
|
183
|
-
|
|
152
|
+
const containerProps = getChartContainerProps({
|
|
153
|
+
familyClasses: ["seeds-chart-time-series", "seeds-chart-bar"],
|
|
154
|
+
colors: series.map((s) => s.color),
|
|
155
|
+
hasOnClick,
|
|
156
|
+
className: props.className
|
|
157
|
+
});
|
|
158
|
+
return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsx(
|
|
159
|
+
ChartRenderer,
|
|
184
160
|
{
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
tooltipClickLabel: props.tooltipClickLabel,
|
|
198
|
-
timezone: tooltipTimezone,
|
|
199
|
-
invalidNumberLabel: props.invalidNumberLabel,
|
|
200
|
-
valueFormat: props.yAxis?.format,
|
|
201
|
-
exportTitle: props.exportTitle,
|
|
202
|
-
onReady: props.onReady
|
|
203
|
-
}
|
|
204
|
-
)
|
|
161
|
+
options,
|
|
162
|
+
series,
|
|
163
|
+
colors,
|
|
164
|
+
tooltip: props.tooltip,
|
|
165
|
+
annotationLookup,
|
|
166
|
+
hasOnClick,
|
|
167
|
+
tooltipClickLabel: props.tooltipClickLabel,
|
|
168
|
+
timezone: tooltipTimezone,
|
|
169
|
+
invalidNumberLabel: props.invalidNumberLabel,
|
|
170
|
+
valueFormat: props.yAxis?.format,
|
|
171
|
+
exportTitle: props.exportTitle,
|
|
172
|
+
onReady: props.onReady
|
|
205
173
|
}
|
|
206
|
-
);
|
|
174
|
+
) });
|
|
207
175
|
});
|
|
208
176
|
export {
|
|
209
177
|
BarChart
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/charts/bar/BarChart.tsx","../../../src/charts/bar/adapter.ts","../../../src/charts/bar/styles.ts","../../../src/charts/shared/styles.ts","../../../src/charts/constants.ts"],"sourcesContent":["import { memo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildBarChartOptions } from \"./adapter\";\nimport { BarStyledBox } from \"./styles\";\nimport type { BarChartProps } from \"./types\";\nimport { BAR_CHART_DEFAULT_SERIES_LIMIT } from \"../constants\";\n\nexport const BarChart = memo(function BarChart(props: BarChartProps) {\n // The shared hook caps the series to the limit (and warns once per render\n // when the default is exceeded without an explicit override) so the adapter\n // and renderer below all consume the capped data.\n const seriesLimit = props.seriesLimit ?? BAR_CHART_DEFAULT_SERIES_LIMIT;\n const { colors, series } = useSeedsChartSetup({\n series: props.series,\n seriesLimit,\n isSeriesLimitOverridden: props.seriesLimit !== undefined,\n hideSeriesLimitWarning: props.hideSeriesLimitWarning,\n componentName: \"BarChart\",\n });\n\n const { options, annotationLookup, tooltipTimezone } = buildBarChartOptions(\n props,\n props.direction ?? \"vertical\",\n series\n );\n const hasOnClick = Boolean(props.onClick);\n\n return (\n <BarStyledBox\n $colors={colors}\n $hasOnClick={hasOnClick}\n bg=\"container.background.base\"\n >\n <ChartRenderer\n options={options}\n series={series}\n colors={colors}\n tooltip={props.tooltip}\n annotationLookup={annotationLookup}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n timezone={tooltipTimezone}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.yAxis?.format}\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </BarStyledBox>\n );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n SeedsChartColumnPlotOptions,\n SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n buildDimensionalAxis,\n resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n defaultValueAxisLabelFormatter,\n makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { BarChartDirection, BarChartProps } from \"./types\";\n\n// Maps the public `direction` to the Highcharts series/chart type. Highcharts\n// `bar` is a horizontally-oriented `column`: it performs the visual rotation\n// while keeping axis roles (xAxis = category, yAxis = value), so the rest of the\n// adapter is direction-agnostic.\nfunction highchartsType(direction: BarChartDirection): \"column\" | \"bar\" {\n return direction === \"horizontal\" ? \"bar\" : \"column\";\n}\n\nexport function buildBarChartOptions(\n props: BarChartProps,\n direction: BarChartDirection,\n // The (already-capped) series to render. Defaults to `props.series` so the\n // ~40 existing call sites keep working; the component passes the capped\n // series from `useSeedsChartSetup` explicitly.\n series: BarChartProps[\"series\"] = props.series\n): {\n options: SeedsChartOptions;\n annotationLookup: ChartAnnotationLookup | undefined;\n /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n tooltipTimezone: string | undefined;\n} {\n const chartType = highchartsType(direction);\n const isDatetime = props.xAxis.type === \"datetime\";\n const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n props.annotations\n );\n // `column` (vertical) and `bar` (horizontal) take the same option shape, so a\n // single config is assigned under the active direction's key. Typed\n // explicitly so the `point.events` handlers below keep their `this`/`event`\n // contextual types (a computed `[chartType]` key would otherwise erase them).\n const barTypeConfig: SeedsChartColumnPlotOptions = {\n // \"grouped\" maps to omitting `stacking` — Highcharts renders multi-series\n // columns side-by-side when no stacking is set.\n ...(props.stacking === \"grouped\"\n ? {}\n : { stacking: props.stacking ?? \"normal\" }),\n // Horizontal bars are height-constrained (fixed chart height ÷ categories),\n // so the same padding fractions that work for columns produce hairline bars.\n pointPadding: direction === \"horizontal\" ? 0.05 : 0.25,\n groupPadding: direction === \"horizontal\" ? 0.1 : 0.25,\n // Fixed bar width on datetime axes. Sparse time-series otherwise size\n // columns from the (large) gap between points and balloon; this mirrors\n // v1's `pointWidth: 20` time-series treatment. Dense datetime data may\n // instead want a `maxPointWidth` cap — revisit when Line/Area land.\n ...(isDatetime ? { pointWidth: 20 } : {}),\n borderRadius: 4,\n borderWidth: 0,\n // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor\n // is over the chart, all bars dim; these handlers restore opacity for\n // every bar at the hovered x (so stacked/grouped bars highlight together\n // rather than just the single hovered bar).\n point: {\n events: {\n click: props.onClick\n ? (event) => props.onClick!({ position: event.point.x })\n : undefined,\n mouseOver: function () {\n const x = this.x;\n this.series.chart.series.forEach((s) => {\n if (s.type !== chartType) return;\n s.data.forEach((point) => {\n if (point.x !== x) return;\n point.graphic?.element?.classList.add(\"bar-point-hover\");\n });\n });\n },\n mouseOut: function () {\n this.series.chart.series.forEach((s) => {\n if (s.type !== chartType) return;\n s.data.forEach((point) => {\n point.graphic?.element?.classList.remove(\"bar-point-hover\");\n });\n });\n },\n },\n },\n };\n const options: SeedsChartOptions = {\n ...buildBaseChartOptions({\n type: chartType,\n description: props.description,\n valueSuffix: props.valueSuffix,\n reserveTopMargin: Boolean(annotations),\n timezone: tooltipTimezone,\n }),\n xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n yAxis: {\n min: props.yAxis?.min,\n max: props.yAxis?.max,\n gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\n title: { text: props.yAxis?.title ?? \"\" },\n labels: {\n // `showLabels` toggles tick-label visibility; defaults to shown.\n enabled: props.yAxis?.showLabels !== false,\n // A declarative `format` drives ticks through the shared valueFormatter;\n // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n formatter: props.yAxis?.format\n ? makeValueAxisLabelFormatter(props.yAxis.format)\n : defaultValueAxisLabelFormatter,\n },\n },\n plotOptions: {\n series: { animation: false },\n [chartType]: barTypeConfig,\n },\n series: series.map((s) => ({\n type: chartType,\n name: s.name,\n data: [...s.data],\n color: s.color,\n })),\n ...(annotations ? { annotations } : {}),\n };\n\n return { options, annotationLookup, tooltipTimezone };\n}\n","import styled, { css } from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { timeSeriesChartStyles } from \"../../styles/chartStyles\";\nimport { axisLabelV2Styles } from \"../shared/styles\";\nimport type {\n TypeChartStyleColor,\n TypeChartStyleHasOnClick,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n $colors: ReadonlyArray<TypeChartStyleColor>;\n $hasOnClick: TypeChartStyleHasOnClick;\n}>;\n\n// Direction-neutral styling shared by the v2 bar family (vertical + horizontal).\n// Consumes only the v1 `timeSeriesChartStyles` base and owns the hover-dimming\n// block itself, keyed on the neutral `.bar-point-hover` class the adapter emits\n// — so v2 no longer imports v1 *component* styles (see `shared/styles.ts`).\nexport const barFamilyStyles = css<StyleProps>`\n ${timeSeriesChartStyles}\n\n /*\n When the chart container is hovered, dim all bars. Then restore opacity for\n the hovered bar(s) — flagged with the bar-point-hover class by the adapter —\n so the non-hovered bars fade out.\n */\n .highcharts-container:hover .highcharts-point {\n fill-opacity: 0.3;\n }\n\n .highcharts-point.bar-point-hover {\n fill-opacity: 1 !important;\n }\n`;\n\nexport const BarStyledBox = styled(Box)<StyleProps>`\n ${barFamilyStyles}\n ${axisLabelV2Styles}\n`;\n","import { css } from \"styled-components\";\n\n/**\n * v2 chart axis-label styles. v2 charts render in `styledMode` with\n * `useHTML: false`, so axis labels are SVG `<text>` / `<tspan>` rather than the\n * HTML `<span>`s v1 uses; these mirror the v1 HTML label rules in\n * `styles/chartStyles.ts` for the SVG element type.\n *\n * Kept here, separate from v1's `timeSeriesChartStyles`: v2 may *consume* the v1\n * styles, but v2-specific rules must not accrete into the v1 files — that keeps\n * the eventual v1 → v2 port clean and avoids coupling. Compose this into each v2\n * chart family's styled wrapper.\n */\nexport const axisLabelV2Styles = css`\n .highcharts-xaxis-labels,\n .highcharts-yaxis-labels {\n // SVG labels (styledMode): fill is the SVG text colour; color has no effect.\n text {\n font-family: ${({ theme }) => theme.fontFamily};\n ${({ theme }) => theme.typography[100]};\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n fill: ${({ theme }) => theme.colors.text.subtext};\n }\n }\n // Two-line stacked datetime label: the boundary token is an\n // hc-axis-label-secondary tspan on a second line, rendered semibold.\n .highcharts-xaxis-labels text tspan.hc-axis-label-secondary {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n`;\n","export const BAR_CHART_DEFAULT_SERIES_LIMIT = 10;\n"],"mappings":"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","names":["css","css","BarChart"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/charts/bar/BarChart.tsx","../../../src/charts/bar/adapter.ts","../../../src/charts/constants.ts"],"sourcesContent":["import { memo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { getChartContainerProps } from \"../shared/chartContainer\";\nimport { buildBarChartOptions } from \"./adapter\";\nimport type { BarChartProps } from \"./types\";\nimport { BAR_CHART_DEFAULT_SERIES_LIMIT } from \"../constants\";\n\nexport const BarChart = memo(function BarChart(props: BarChartProps) {\n // The shared hook caps the series to the limit (and warns once per render\n // when the default is exceeded without an explicit override) so the adapter\n // and renderer below all consume the capped data.\n const seriesLimit = props.seriesLimit ?? BAR_CHART_DEFAULT_SERIES_LIMIT;\n const { colors, series } = useSeedsChartSetup({\n series: props.series,\n seriesLimit,\n isSeriesLimitOverridden: props.seriesLimit !== undefined,\n hideSeriesLimitWarning: props.hideSeriesLimitWarning,\n componentName: \"BarChart\",\n });\n\n const { options, annotationLookup, tooltipTimezone } = buildBarChartOptions(\n props,\n props.direction ?? \"vertical\",\n series\n );\n const hasOnClick = Boolean(props.onClick);\n\n // Plain <div> consuming the shared chart-styles.css contract via\n // getChartContainerProps. Colors are the RAW per-series colors (undefined when\n // unset, so only explicit overrides inline --highcharts-color-N), NOT the\n // palette-resolved `colors` passed to ChartRenderer. Neither stylesheet is\n // self-imported (consumers import both).\n const containerProps = getChartContainerProps({\n familyClasses: [\"seeds-chart-time-series\", \"seeds-chart-bar\"],\n colors: series.map((s) => s.color),\n hasOnClick,\n className: props.className,\n });\n\n return (\n <div {...containerProps}>\n <ChartRenderer\n options={options}\n series={series}\n colors={colors}\n tooltip={props.tooltip}\n annotationLookup={annotationLookup}\n hasOnClick={hasOnClick}\n tooltipClickLabel={props.tooltipClickLabel}\n timezone={tooltipTimezone}\n invalidNumberLabel={props.invalidNumberLabel}\n valueFormat={props.yAxis?.format}\n exportTitle={props.exportTitle}\n onReady={props.onReady}\n />\n </div>\n );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n SeedsChartColumnPlotOptions,\n SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n buildDimensionalAxis,\n resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n defaultValueAxisLabelFormatter,\n makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { BarChartDirection, BarChartProps } from \"./types\";\n\n// Maps the public `direction` to the Highcharts series/chart type. Highcharts\n// `bar` is a horizontally-oriented `column`: it performs the visual rotation\n// while keeping axis roles (xAxis = category, yAxis = value), so the rest of the\n// adapter is direction-agnostic.\nfunction highchartsType(direction: BarChartDirection): \"column\" | \"bar\" {\n return direction === \"horizontal\" ? \"bar\" : \"column\";\n}\n\nexport function buildBarChartOptions(\n props: BarChartProps,\n direction: BarChartDirection,\n // The (already-capped) series to render. Defaults to `props.series` so the\n // ~40 existing call sites keep working; the component passes the capped\n // series from `useSeedsChartSetup` explicitly.\n series: BarChartProps[\"series\"] = props.series\n): {\n options: SeedsChartOptions;\n annotationLookup: ChartAnnotationLookup | undefined;\n /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n tooltipTimezone: string | undefined;\n} {\n const chartType = highchartsType(direction);\n const isDatetime = props.xAxis.type === \"datetime\";\n // Gate the `onMouseEnter`/`onMouseLeave` `series` field on the *rendered*\n // (already-capped) series count, not `props.series` — if `seriesLimit` caps a\n // multi-series input down to one rendered series the chart is effectively\n // single-series, and `series` must be absent per the \"present only for\n // multi-series bar\" contract.\n const isMultiSeries = series.length > 1;\n const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n props.annotations\n );\n // `column` (vertical) and `bar` (horizontal) take the same option shape, so a\n // single config is assigned under the active direction's key. Typed\n // explicitly so the `point.events` handlers below keep their `this`/`event`\n // contextual types (a computed `[chartType]` key would otherwise erase them).\n const barTypeConfig: SeedsChartColumnPlotOptions = {\n // \"grouped\" maps to omitting `stacking` — Highcharts renders multi-series\n // columns side-by-side when no stacking is set.\n ...(props.stacking === \"grouped\"\n ? {}\n : { stacking: props.stacking ?? \"normal\" }),\n // Horizontal bars are height-constrained (fixed chart height ÷ categories),\n // so the same padding fractions that work for columns produce hairline bars.\n pointPadding: direction === \"horizontal\" ? 0.05 : 0.25,\n groupPadding: direction === \"horizontal\" ? 0.1 : 0.25,\n // Fixed bar width on datetime axes. Sparse time-series otherwise size\n // columns from the (large) gap between points and balloon; this mirrors\n // v1's `pointWidth: 20` time-series treatment. Dense datetime data may\n // instead want a `maxPointWidth` cap — revisit when Line/Area land.\n ...(isDatetime ? { pointWidth: 20 } : {}),\n borderRadius: 4,\n borderWidth: 0,\n // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor\n // is over the chart, all bars dim; these handlers restore opacity for\n // every bar at the hovered x (so stacked/grouped bars highlight together\n // rather than just the single hovered bar).\n point: {\n events: {\n click: props.onClick\n ? (event) => props.onClick!({ position: event.point.x })\n : undefined,\n mouseOver: function () {\n const x = this.x;\n props.onMouseEnter?.({\n position: x,\n // Omit the key entirely (not `series: undefined`) for single-series\n // so consumers testing `\"series\" in payload` see the contract.\n ...(isMultiSeries\n ? {\n series: { name: this.series.name, index: this.series.index },\n }\n : {}),\n });\n this.series.chart.series.forEach((s) => {\n if (s.type !== chartType) return;\n s.data.forEach((point) => {\n if (point.x !== x) return;\n point.graphic?.element?.classList.add(\"bar-point-hover\");\n });\n });\n },\n mouseOut: function () {\n props.onMouseLeave?.({\n position: this.x,\n ...(isMultiSeries\n ? {\n series: { name: this.series.name, index: this.series.index },\n }\n : {}),\n });\n this.series.chart.series.forEach((s) => {\n if (s.type !== chartType) return;\n s.data.forEach((point) => {\n point.graphic?.element?.classList.remove(\"bar-point-hover\");\n });\n });\n },\n },\n },\n };\n const options: SeedsChartOptions = {\n ...buildBaseChartOptions({\n type: chartType,\n description: props.description,\n valueSuffix: props.valueSuffix,\n reserveTopMargin: Boolean(annotations),\n timezone: tooltipTimezone,\n }),\n xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n yAxis: {\n min: props.yAxis?.min,\n max: props.yAxis?.max,\n gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n // A dedicated plotLine at 0, styled distinctly from regular gridlines\n // (see chartStyles.ts).\n plotLines: [{ value: 0, className: \"y-axis-zero-line\", zIndex: 3 }],\n title: { text: props.yAxis?.title ?? \"\" },\n labels: {\n // `showLabels` toggles tick-label visibility; defaults to shown.\n enabled: props.yAxis?.showLabels !== false,\n // A declarative `format` drives ticks through the shared valueFormatter;\n // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n formatter: props.yAxis?.format\n ? makeValueAxisLabelFormatter(props.yAxis.format)\n : defaultValueAxisLabelFormatter,\n },\n },\n plotOptions: {\n series: { animation: false },\n [chartType]: barTypeConfig,\n },\n series: series.map((s) => ({\n type: chartType,\n name: s.name,\n data: [...s.data],\n color: s.color,\n })),\n ...(annotations ? { annotations } : {}),\n };\n\n return { options, annotationLookup, tooltipTimezone };\n}\n","export const BAR_CHART_DEFAULT_SERIES_LIMIT = 10;\n"],"mappings":"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","names":["BarChart"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
valueFormatter
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-QSSYSKRP.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-KMFRRUTY.js.map
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// src/charts/shared/chartContainer.ts
|
|
2
|
+
function getChartContainerProps(args) {
|
|
3
|
+
const { familyClasses, colors, patterns = [], hasOnClick, className } = args;
|
|
4
|
+
const style = {};
|
|
5
|
+
colors.forEach((color, index) => {
|
|
6
|
+
if (color) {
|
|
7
|
+
style[`--highcharts-color-${index}`] = color;
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
const dashedSeries = patterns.map((pattern, index) => pattern === "dashed" ? index : -1).filter((index) => index >= 0).join(" ");
|
|
11
|
+
return {
|
|
12
|
+
className: ["seeds-chart", ...familyClasses, className].filter(Boolean).join(" "),
|
|
13
|
+
style,
|
|
14
|
+
...hasOnClick ? { "data-has-on-click": "" } : {},
|
|
15
|
+
...dashedSeries ? { "data-dashed-series": dashedSeries } : {}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export {
|
|
20
|
+
getChartContainerProps
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=chunk-P3MVYSHX.js.map
|