@sproutsocial/seeds-react-data-viz 0.23.0 → 0.24.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/{axis-WOeYkTO1.d.mts → axis-B61qI-nm.d.mts} +1 -15
- package/dist/{axis-WOeYkTO1.d.ts → axis-B78FtYLh.d.ts} +1 -15
- package/dist/bar/index.d.mts +2 -2
- package/dist/bar/index.d.ts +2 -2
- package/dist/bar/index.js +14 -14
- package/dist/bar/index.js.map +1 -1
- package/dist/bubble/index.d.mts +1 -1
- package/dist/bubble/index.d.ts +1 -1
- package/dist/bubble/index.js +4 -4
- package/dist/{chartBase-BClSc5EN.d.mts → chartBase-CptOt3V0.d.mts} +23 -1
- package/dist/{chartBase-CycEw2vy.d.ts → chartBase-Nl6mcTB7.d.ts} +23 -1
- package/dist/{chunk-GQOKCB3M.js → chunk-3P6MPBSZ.js} +212 -27
- package/dist/chunk-3P6MPBSZ.js.map +1 -0
- package/dist/{chunk-6SF6OYQA.js → chunk-MTGYEUZN.js} +3 -3
- package/dist/{chunk-6SF6OYQA.js.map → chunk-MTGYEUZN.js.map} +1 -1
- package/dist/chunk-OP6K5NDR.js +52 -0
- package/dist/chunk-OP6K5NDR.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 +4 -4
- package/dist/esm/bar/index.js +10 -10
- package/dist/esm/bar/index.js.map +1 -1
- package/dist/esm/bubble/index.js +1 -1
- package/dist/esm/{chunk-EHKGDOMK.js → chunk-ISP4A622.js} +196 -11
- package/dist/esm/chunk-ISP4A622.js.map +1 -0
- package/dist/esm/{chunk-AEBP4NCY.js → chunk-MQDI7D54.js} +2 -2
- package/dist/esm/chunk-Y4RJJBJQ.js +52 -0
- package/dist/esm/chunk-Y4RJJBJQ.js.map +1 -0
- package/dist/esm/donut/index.js +1 -1
- package/dist/esm/line-area/index.js +10 -10
- package/dist/esm/line-area/index.js.map +1 -1
- package/dist/esm/sparkline/index.js +9 -9
- package/dist/esm/sparkline/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 +14 -14
- package/dist/line-area/index.js.map +1 -1
- package/dist/sparkline/index.d.mts +3 -3
- package/dist/sparkline/index.d.ts +3 -3
- package/dist/sparkline/index.js +10 -10
- package/dist/sparkline/index.js.map +1 -1
- package/package.json +6 -6
- package/dist/chunk-6D7P3IOT.js +0 -150
- package/dist/chunk-6D7P3IOT.js.map +0 -1
- package/dist/chunk-GQOKCB3M.js.map +0 -1
- package/dist/esm/chunk-EHKGDOMK.js.map +0 -1
- package/dist/esm/chunk-NAKJY5PA.js +0 -150
- package/dist/esm/chunk-NAKJY5PA.js.map +0 -1
- /package/dist/esm/{chunk-AEBP4NCY.js.map → chunk-MQDI7D54.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-MTGYEUZN.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-MTGYEUZN.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"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
|
|
2
|
+
|
|
3
|
+
var _chunk3P6MPBSZjs = require('./chunk-3P6MPBSZ.js');
|
|
4
|
+
|
|
5
|
+
// src/charts/shared/axisOptions.ts
|
|
6
|
+
function makeDatetimeAxisLabelFormatter(timezone, timeFormat) {
|
|
7
|
+
return function() {
|
|
8
|
+
const { primary, secondary } = _chunk3P6MPBSZjs.datetimeFormatter.call(void 0, {
|
|
9
|
+
value: this.value,
|
|
10
|
+
tickPositions: _nullishCoalesce(this.axis.tickPositions, () => ( [])),
|
|
11
|
+
timezone,
|
|
12
|
+
timeFormat
|
|
13
|
+
});
|
|
14
|
+
return secondary ? `${primary}<br/><span class="hc-axis-label-secondary">${secondary}</span>` : primary;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
function buildDimensionalAxis(axis, timezone) {
|
|
18
|
+
if (axis.type === "datetime") {
|
|
19
|
+
return {
|
|
20
|
+
type: "datetime",
|
|
21
|
+
crosshair: axis.crosshair,
|
|
22
|
+
labels: {
|
|
23
|
+
formatter: makeDatetimeAxisLabelFormatter(timezone, axis.timeFormat)
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
type: "category",
|
|
29
|
+
categories: [...axis.categories],
|
|
30
|
+
crosshair: axis.crosshair
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function resolveTooltipTimezone(axis, timezone) {
|
|
34
|
+
return axis.type === "datetime" ? _nullishCoalesce(timezone, () => ( "UTC")) : void 0;
|
|
35
|
+
}
|
|
36
|
+
function resolveTooltipOptions(input) {
|
|
37
|
+
const { xAxis, timezone } = input;
|
|
38
|
+
if (!xAxis) {
|
|
39
|
+
return { timezone: void 0, timeFormat: void 0, textLocale: void 0 };
|
|
40
|
+
}
|
|
41
|
+
return {
|
|
42
|
+
timezone: resolveTooltipTimezone(xAxis, timezone),
|
|
43
|
+
timeFormat: xAxis.type === "datetime" ? xAxis.timeFormat : void 0,
|
|
44
|
+
textLocale: void 0
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
exports.buildDimensionalAxis = buildDimensionalAxis; exports.resolveTooltipOptions = resolveTooltipOptions;
|
|
52
|
+
//# sourceMappingURL=chunk-OP6K5NDR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-OP6K5NDR.js","../src/charts/shared/axisOptions.ts"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B;AACA;ACqBA,SAAS,8BAAA,CACP,QAAA,EACA,UAAA,EACA;AACA,EAAA,OAAO,QAAA,CAAA,EAAwD;AAC7D,IAAA,MAAM,EAAE,OAAA,EAAS,UAAU,EAAA,EAAI,gDAAA;AAAkB,MAC/C,KAAA,EAAO,IAAA,CAAK,KAAA;AAAA,MACZ,aAAA,mBAAe,IAAA,CAAK,IAAA,CAAK,aAAA,UAAiB,CAAC,GAAA;AAAA,MAC3C,QAAA;AAAA,MACA;AAAA,IACF,CAAC,CAAA;AACD,IAAA,OAAO,UAAA,EACH,CAAA,EAAA;AAEN,EAAA;AACF;AAOgB;AAII,EAAA;AACT,IAAA;AACC,MAAA;AACU,MAAA;AACR,MAAA;AACK,QAAA;AACb,MAAA;AACF,IAAA;AACF,EAAA;AACO,EAAA;AACC,IAAA;AACU,IAAA;AACA,IAAA;AAClB,EAAA;AACF;AAOgB;AAIO,EAAA;AACvB;AAqBgB;AAGC,EAAA;AACH,EAAA;AACS,IAAA;AACrB,EAAA;AACO,EAAA;AACK,IAAA;AACQ,IAAA;AACN,IAAA;AACd,EAAA;AACF;ADhEwB;AACA;AACA;AACA;AACA","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/chunk-OP6K5NDR.js","sourcesContent":[null,"// 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 { timezone: undefined, timeFormat: undefined, textLocale: undefined };\n }\n return {\n timezone: resolveTooltipTimezone(xAxis, timezone),\n timeFormat: xAxis.type === \"datetime\" ? xAxis.timeFormat : undefined,\n textLocale: undefined,\n };\n}\n"]}
|
package/dist/donut/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-
|
|
3
|
+
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-CptOt3V0.mjs';
|
|
4
4
|
import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.mjs';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
|
|
6
6
|
import '@sproutsocial/seeds-react-icon';
|
package/dist/donut/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-
|
|
3
|
+
import { V as ValueFormat, C as ChartTooltipProps, a as ChartTooltipDataRow } from '../chartBase-Nl6mcTB7.js';
|
|
4
4
|
import { C as ChartColorableEntity, a as ChartIconableEntity, b as ChartClickHandler, c as ChartHoverHandler } from '../interactions-pEXA1XxF.js';
|
|
5
5
|
import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
|
|
6
6
|
import '@sproutsocial/seeds-react-icon';
|
package/dist/donut/index.js
CHANGED
|
@@ -8,7 +8,7 @@ var _chunk33Y5FZTTjs = require('../chunk-33Y5FZTT.js');
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _chunk3P6MPBSZjs = require('../chunk-3P6MPBSZ.js');
|
|
12
12
|
require('../chunk-2H2Z7PKZ.js');
|
|
13
13
|
|
|
14
14
|
// src/charts/donut/DonutChart.tsx
|
|
@@ -16,7 +16,7 @@ var _react = require('react');
|
|
|
16
16
|
|
|
17
17
|
// src/charts/donut/adapter.ts
|
|
18
18
|
function buildDonutOptions(props, colors) {
|
|
19
|
-
const base =
|
|
19
|
+
const base = _chunk3P6MPBSZjs.buildBaseChartOptions.call(void 0, {
|
|
20
20
|
type: "pie",
|
|
21
21
|
description: props.description
|
|
22
22
|
});
|
|
@@ -75,7 +75,7 @@ function buildDonutOptions(props, colors) {
|
|
|
75
75
|
// src/charts/donut/DonutChart.tsx
|
|
76
76
|
var _jsxruntime = require('react/jsx-runtime');
|
|
77
77
|
var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
78
|
-
const { colors } =
|
|
78
|
+
const { colors } = _chunk3P6MPBSZjs.useSeedsChartSetup.call(void 0, {
|
|
79
79
|
series: props.data.map((d) => ({ color: d.color }))
|
|
80
80
|
});
|
|
81
81
|
const options = _react.useMemo.call(void 0,
|
|
@@ -91,7 +91,7 @@ var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
|
91
91
|
});
|
|
92
92
|
const tooltip = props.tooltip ? (args) => props.tooltip(args) : void 0;
|
|
93
93
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...containerProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
94
|
-
|
|
94
|
+
_chunk3P6MPBSZjs.ChartRenderer,
|
|
95
95
|
{
|
|
96
96
|
options,
|
|
97
97
|
series: props.data.map((d, i) => ({
|
package/dist/esm/bar/index.js
CHANGED
|
@@ -2,11 +2,11 @@ import {
|
|
|
2
2
|
buildAnnotationConfig,
|
|
3
3
|
defaultValueAxisLabelFormatter,
|
|
4
4
|
makeValueAxisLabelFormatter
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-MQDI7D54.js";
|
|
6
6
|
import {
|
|
7
7
|
buildDimensionalAxis,
|
|
8
|
-
|
|
9
|
-
} from "../chunk-
|
|
8
|
+
resolveTooltipOptions
|
|
9
|
+
} from "../chunk-Y4RJJBJQ.js";
|
|
10
10
|
import {
|
|
11
11
|
getChartContainerProps
|
|
12
12
|
} from "../chunk-P3MVYSHX.js";
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
ChartRenderer,
|
|
18
18
|
buildBaseChartOptions,
|
|
19
19
|
useSeedsChartSetup
|
|
20
|
-
} from "../chunk-
|
|
20
|
+
} from "../chunk-ISP4A622.js";
|
|
21
21
|
import "../chunk-NZX3WPXT.js";
|
|
22
22
|
|
|
23
23
|
// src/charts/bar/BarChart.tsx
|
|
@@ -31,7 +31,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
31
31
|
const chartType = highchartsType(direction);
|
|
32
32
|
const isDatetime = props.xAxis.type === "datetime";
|
|
33
33
|
const isMultiSeries = series.length > 1;
|
|
34
|
-
const
|
|
34
|
+
const tooltipOptions = resolveTooltipOptions(props);
|
|
35
35
|
const { annotations, lookup: annotationLookup } = buildAnnotationConfig(
|
|
36
36
|
props.annotations
|
|
37
37
|
);
|
|
@@ -96,7 +96,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
96
96
|
type: chartType,
|
|
97
97
|
description: props.description,
|
|
98
98
|
reserveTopMargin: Boolean(annotations),
|
|
99
|
-
timezone:
|
|
99
|
+
timezone: tooltipOptions.timezone
|
|
100
100
|
});
|
|
101
101
|
const options = {
|
|
102
102
|
...base,
|
|
@@ -113,7 +113,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
113
113
|
// spacing ([10, 10, 15, 10]) shrinks the plot area.
|
|
114
114
|
spacing: [5, 1, 0, 2]
|
|
115
115
|
},
|
|
116
|
-
xAxis: buildDimensionalAxis(props.xAxis,
|
|
116
|
+
xAxis: buildDimensionalAxis(props.xAxis, tooltipOptions.timezone ?? "UTC"),
|
|
117
117
|
yAxis: {
|
|
118
118
|
min: props.yAxis?.min,
|
|
119
119
|
max: props.yAxis?.max,
|
|
@@ -142,7 +142,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
|
|
|
142
142
|
})),
|
|
143
143
|
...annotations ? { annotations } : {}
|
|
144
144
|
};
|
|
145
|
-
return { options, annotationLookup,
|
|
145
|
+
return { options, annotationLookup, tooltipOptions };
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
// src/charts/constants.ts
|
|
@@ -159,7 +159,7 @@ var BarChart = memo(function BarChart2(props) {
|
|
|
159
159
|
hideSeriesLimitWarning: props.hideSeriesLimitWarning,
|
|
160
160
|
componentName: "BarChart"
|
|
161
161
|
});
|
|
162
|
-
const { options, annotationLookup,
|
|
162
|
+
const { options, annotationLookup, tooltipOptions } = buildBarChartOptions(
|
|
163
163
|
props,
|
|
164
164
|
props.direction ?? "vertical",
|
|
165
165
|
series
|
|
@@ -181,7 +181,7 @@ var BarChart = memo(function BarChart2(props) {
|
|
|
181
181
|
annotationLookup,
|
|
182
182
|
hasOnClick,
|
|
183
183
|
tooltipClickLabel: props.tooltipClickLabel,
|
|
184
|
-
|
|
184
|
+
tooltipOptions,
|
|
185
185
|
invalidNumberLabel: props.invalidNumberLabel,
|
|
186
186
|
valueFormat: props.yAxis?.format,
|
|
187
187
|
exportTitle: props.exportTitle,
|
|
@@ -1 +1 @@
|
|
|
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 { TIME_SERIES_CHART_HEIGHT } from \"../../constants/chartOptions\";\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; a fixed\n // pointWidth: 20 gives a consistent time-series treatment. Dense datetime\n // data may 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 base = buildBaseChartOptions({\n type: chartType,\n description: props.description,\n reserveTopMargin: Boolean(annotations),\n timezone: tooltipTimezone,\n });\n\n const options: SeedsChartOptions = {\n ...base,\n // Default height baseline (overridable via `props.height`) so consumers\n // who don't configure sizing keep the design-reviewed default.\n chart: {\n ...base.chart,\n // Re-assert the definite `type` so spreading the optionally-typed\n // `base.chart` doesn't widen the required `type` field to optional.\n type: chartType,\n height: props.height ?? TIME_SERIES_CHART_HEIGHT,\n // Tight time-series spacing (from constants/chartOptions.ts) so the plot\n // area fills the 275px container; without it Highcharts' larger default\n // spacing ([10, 10, 15, 10]) shrinks the plot area.\n spacing: [5, 1, 0, 2],\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
|
+
{"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, tooltipOptions } = 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 tooltipOptions={tooltipOptions}\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 ChartTooltipProps,\n SeedsChartColumnPlotOptions,\n SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport { TIME_SERIES_CHART_HEIGHT } from \"../../constants/chartOptions\";\nimport {\n buildDimensionalAxis,\n resolveTooltipOptions,\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 datetime-derived tooltip options (timezone / timeFormat / textLocale); all undefined on category axes. */\n tooltipOptions: Pick<\n ChartTooltipProps,\n \"timezone\" | \"timeFormat\" | \"textLocale\"\n >;\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 tooltipOptions = resolveTooltipOptions(props);\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; a fixed\n // pointWidth: 20 gives a consistent time-series treatment. Dense datetime\n // data may 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 base = buildBaseChartOptions({\n type: chartType,\n description: props.description,\n reserveTopMargin: Boolean(annotations),\n timezone: tooltipOptions.timezone,\n });\n\n const options: SeedsChartOptions = {\n ...base,\n // Default height baseline (overridable via `props.height`) so consumers\n // who don't configure sizing keep the design-reviewed default.\n chart: {\n ...base.chart,\n // Re-assert the definite `type` so spreading the optionally-typed\n // `base.chart` doesn't widen the required `type` field to optional.\n type: chartType,\n height: props.height ?? TIME_SERIES_CHART_HEIGHT,\n // Tight time-series spacing (from constants/chartOptions.ts) so the plot\n // area fills the 275px container; without it Highcharts' larger default\n // spacing ([10, 10, 15, 10]) shrinks the plot area.\n spacing: [5, 1, 0, 2],\n },\n xAxis: buildDimensionalAxis(props.xAxis, tooltipOptions.timezone ?? \"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, tooltipOptions };\n}\n","export const BAR_CHART_DEFAULT_SERIES_LIMIT = 10;\n"],"mappings":"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","names":["BarChart"]}
|
package/dist/esm/bubble/index.js
CHANGED
|
@@ -135,6 +135,173 @@ import { Box as Box2 } from "@sproutsocial/seeds-react-box";
|
|
|
135
135
|
import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
|
|
136
136
|
import { Text } from "@sproutsocial/seeds-react-text";
|
|
137
137
|
|
|
138
|
+
// src/charts/shared/formatters/datetimeFormatter.ts
|
|
139
|
+
var DAY_MS = 864e5;
|
|
140
|
+
var WEEK_MS = 6048e5;
|
|
141
|
+
var MIN_MONTH_MS = 24192e5;
|
|
142
|
+
var MIN_YEAR_MS = 31536e6;
|
|
143
|
+
var getDatePartsInTimezone = (date, timezone) => {
|
|
144
|
+
const formatter = new Intl.DateTimeFormat("en-US", {
|
|
145
|
+
year: "numeric",
|
|
146
|
+
month: "numeric",
|
|
147
|
+
day: "numeric",
|
|
148
|
+
timeZone: timezone
|
|
149
|
+
});
|
|
150
|
+
const parts = formatter.formatToParts(date);
|
|
151
|
+
return {
|
|
152
|
+
day: parseInt(parts.find((p) => p.type === "day")?.value ?? "0", 10),
|
|
153
|
+
month: parseInt(parts.find((p) => p.type === "month")?.value ?? "0", 10),
|
|
154
|
+
year: parseInt(parts.find((p) => p.type === "year")?.value ?? "0", 10)
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
var deriveGranularity = (tickPositions) => {
|
|
158
|
+
if (tickPositions.length < 2) {
|
|
159
|
+
return "day";
|
|
160
|
+
}
|
|
161
|
+
const deltas = [];
|
|
162
|
+
for (let i = 1; i < tickPositions.length; i++) {
|
|
163
|
+
const curr = tickPositions[i];
|
|
164
|
+
const prev = tickPositions[i - 1];
|
|
165
|
+
if (curr === void 0 || prev === void 0) {
|
|
166
|
+
continue;
|
|
167
|
+
}
|
|
168
|
+
deltas.push(Math.abs(curr - prev));
|
|
169
|
+
}
|
|
170
|
+
deltas.sort((a, b) => a - b);
|
|
171
|
+
const mid = Math.floor(deltas.length / 2);
|
|
172
|
+
const upper = deltas[mid];
|
|
173
|
+
const lower = deltas[mid - 1];
|
|
174
|
+
const median = deltas.length % 2 === 0 && lower !== void 0 ? (lower + upper) / 2 : upper;
|
|
175
|
+
if (median < DAY_MS) {
|
|
176
|
+
return "hour";
|
|
177
|
+
}
|
|
178
|
+
if (median < WEEK_MS) {
|
|
179
|
+
return "day";
|
|
180
|
+
}
|
|
181
|
+
if (median < MIN_MONTH_MS) {
|
|
182
|
+
return "week";
|
|
183
|
+
}
|
|
184
|
+
if (median < MIN_YEAR_MS) {
|
|
185
|
+
return "month";
|
|
186
|
+
}
|
|
187
|
+
return "year";
|
|
188
|
+
};
|
|
189
|
+
function datetimeFormatter({
|
|
190
|
+
value,
|
|
191
|
+
tickPositions = [],
|
|
192
|
+
// optional
|
|
193
|
+
timezone = "UTC",
|
|
194
|
+
timeFormat = "12",
|
|
195
|
+
textLocale = "en-US"
|
|
196
|
+
}) {
|
|
197
|
+
if (typeof value === "string" || !Number.isFinite(value)) {
|
|
198
|
+
return { primary: String(value) };
|
|
199
|
+
}
|
|
200
|
+
const granularity = deriveGranularity(tickPositions);
|
|
201
|
+
const tickIndex = tickPositions.indexOf(value);
|
|
202
|
+
const isFirst = tickIndex === 0;
|
|
203
|
+
const previousValue = tickPositions[tickIndex - 1];
|
|
204
|
+
const valueDate = new Date(value);
|
|
205
|
+
const valueParts = getDatePartsInTimezone(valueDate, timezone);
|
|
206
|
+
const previousValueDate = previousValue ? new Date(previousValue) : void 0;
|
|
207
|
+
const previousValueParts = previousValueDate ? getDatePartsInTimezone(previousValueDate, timezone) : void 0;
|
|
208
|
+
let firstPartOptions = {};
|
|
209
|
+
let secondPartOptions = {};
|
|
210
|
+
switch (granularity) {
|
|
211
|
+
case "hour":
|
|
212
|
+
firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
|
|
213
|
+
if (isFirst || valueParts.day !== previousValueParts?.day) {
|
|
214
|
+
secondPartOptions = { day: "numeric", month: "short" };
|
|
215
|
+
}
|
|
216
|
+
break;
|
|
217
|
+
case "day":
|
|
218
|
+
case "week":
|
|
219
|
+
firstPartOptions = { day: "numeric" };
|
|
220
|
+
if (isFirst || valueParts.month !== previousValueParts?.month) {
|
|
221
|
+
secondPartOptions = { month: "short" };
|
|
222
|
+
}
|
|
223
|
+
break;
|
|
224
|
+
case "month":
|
|
225
|
+
firstPartOptions = { month: "short" };
|
|
226
|
+
if (isFirst || valueParts.year !== previousValueParts?.year) {
|
|
227
|
+
secondPartOptions = { year: "numeric" };
|
|
228
|
+
}
|
|
229
|
+
break;
|
|
230
|
+
case "year":
|
|
231
|
+
firstPartOptions = { year: "numeric" };
|
|
232
|
+
break;
|
|
233
|
+
default:
|
|
234
|
+
firstPartOptions = {};
|
|
235
|
+
break;
|
|
236
|
+
}
|
|
237
|
+
const primary = new Intl.DateTimeFormat(textLocale, {
|
|
238
|
+
...firstPartOptions,
|
|
239
|
+
timeZone: timezone
|
|
240
|
+
}).format(valueDate);
|
|
241
|
+
if (Object.keys(secondPartOptions).length > 0) {
|
|
242
|
+
const secondary = new Intl.DateTimeFormat(textLocale, {
|
|
243
|
+
...secondPartOptions,
|
|
244
|
+
timeZone: timezone
|
|
245
|
+
}).format(valueDate);
|
|
246
|
+
return { primary, secondary };
|
|
247
|
+
}
|
|
248
|
+
return { primary };
|
|
249
|
+
}
|
|
250
|
+
function datetimeTitleFormatter({
|
|
251
|
+
value,
|
|
252
|
+
tickPositions = [],
|
|
253
|
+
// optional
|
|
254
|
+
timezone = "UTC",
|
|
255
|
+
timeFormat = "12",
|
|
256
|
+
textLocale = "en-US"
|
|
257
|
+
}) {
|
|
258
|
+
if (typeof value === "string" || !Number.isFinite(value)) {
|
|
259
|
+
return String(value);
|
|
260
|
+
}
|
|
261
|
+
const granularity = deriveGranularity(tickPositions);
|
|
262
|
+
const valueDate = new Date(value);
|
|
263
|
+
let options;
|
|
264
|
+
switch (granularity) {
|
|
265
|
+
case "hour":
|
|
266
|
+
options = timeFormat === "24" ? {
|
|
267
|
+
weekday: "long",
|
|
268
|
+
month: "long",
|
|
269
|
+
day: "numeric",
|
|
270
|
+
year: "numeric",
|
|
271
|
+
hour: "numeric",
|
|
272
|
+
minute: "numeric",
|
|
273
|
+
hour12: false
|
|
274
|
+
} : {
|
|
275
|
+
weekday: "long",
|
|
276
|
+
month: "long",
|
|
277
|
+
day: "numeric",
|
|
278
|
+
year: "numeric",
|
|
279
|
+
hour: "numeric"
|
|
280
|
+
};
|
|
281
|
+
break;
|
|
282
|
+
case "month":
|
|
283
|
+
options = { month: "long", year: "numeric" };
|
|
284
|
+
break;
|
|
285
|
+
case "year":
|
|
286
|
+
options = { year: "numeric" };
|
|
287
|
+
break;
|
|
288
|
+
case "day":
|
|
289
|
+
case "week":
|
|
290
|
+
default:
|
|
291
|
+
options = {
|
|
292
|
+
weekday: "long",
|
|
293
|
+
year: "numeric",
|
|
294
|
+
month: "long",
|
|
295
|
+
day: "numeric"
|
|
296
|
+
};
|
|
297
|
+
break;
|
|
298
|
+
}
|
|
299
|
+
return new Intl.DateTimeFormat(textLocale, {
|
|
300
|
+
...options,
|
|
301
|
+
timeZone: timezone
|
|
302
|
+
}).format(valueDate);
|
|
303
|
+
}
|
|
304
|
+
|
|
138
305
|
// src/charts/shared/formatters/valueFormatter.ts
|
|
139
306
|
import { formatDuration } from "@sproutsocial/seeds-react-duration";
|
|
140
307
|
import { formatNumeral } from "@sproutsocial/seeds-react-numeral";
|
|
@@ -177,14 +344,20 @@ function valueFormatter({
|
|
|
177
344
|
|
|
178
345
|
// src/charts/shared/DefaultChartTooltip.tsx
|
|
179
346
|
import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
180
|
-
function formatTitle(
|
|
347
|
+
function formatTitle({
|
|
348
|
+
position,
|
|
349
|
+
timezone,
|
|
350
|
+
timeFormat,
|
|
351
|
+
tickPositions,
|
|
352
|
+
textLocale = "en-US"
|
|
353
|
+
}) {
|
|
181
354
|
if (typeof position === "string") return position;
|
|
182
|
-
return
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
355
|
+
return datetimeTitleFormatter({
|
|
356
|
+
value: position,
|
|
357
|
+
tickPositions,
|
|
358
|
+
timezone,
|
|
359
|
+
timeFormat,
|
|
360
|
+
textLocale
|
|
188
361
|
});
|
|
189
362
|
}
|
|
190
363
|
function AnnotationHeader({
|
|
@@ -209,6 +382,9 @@ function DefaultChartTooltip({
|
|
|
209
382
|
hasOnClick,
|
|
210
383
|
tooltipClickLabel,
|
|
211
384
|
timezone,
|
|
385
|
+
timeFormat,
|
|
386
|
+
tickPositions,
|
|
387
|
+
textLocale,
|
|
212
388
|
invalidNumberLabel,
|
|
213
389
|
valueFormat = {},
|
|
214
390
|
hideTitle,
|
|
@@ -265,7 +441,13 @@ function DefaultChartTooltip({
|
|
|
265
441
|
description: annotation.description
|
|
266
442
|
}
|
|
267
443
|
) : null,
|
|
268
|
-
hideTitle ? null : /* @__PURE__ */ jsx2(ChartTooltipTitle, { children: formatTitle(
|
|
444
|
+
hideTitle ? null : /* @__PURE__ */ jsx2(ChartTooltipTitle, { children: formatTitle({
|
|
445
|
+
position,
|
|
446
|
+
timezone,
|
|
447
|
+
timeFormat,
|
|
448
|
+
tickPositions,
|
|
449
|
+
textLocale
|
|
450
|
+
}) }),
|
|
269
451
|
/* @__PURE__ */ jsx2(
|
|
270
452
|
ChartTooltipTable,
|
|
271
453
|
{
|
|
@@ -483,7 +665,7 @@ function ChartRenderer({
|
|
|
483
665
|
annotationLookup,
|
|
484
666
|
hasOnClick,
|
|
485
667
|
tooltipClickLabel,
|
|
486
|
-
|
|
668
|
+
tooltipOptions,
|
|
487
669
|
invalidNumberLabel,
|
|
488
670
|
valueFormat,
|
|
489
671
|
hideLegend = false,
|
|
@@ -644,6 +826,7 @@ function ChartRenderer({
|
|
|
644
826
|
}))
|
|
645
827
|
);
|
|
646
828
|
const position = isPie || isPackedBubble ? ctx.key ?? ctx.point.name : context.x;
|
|
829
|
+
const tickPositions = ctx.points?.[0]?.series?.xAxis?.tickPositions;
|
|
647
830
|
const resolved = annotationLookup?.get(context.point.x);
|
|
648
831
|
const annotation = resolved ? {
|
|
649
832
|
icon: resolved.icon,
|
|
@@ -659,7 +842,8 @@ function ChartRenderer({
|
|
|
659
842
|
annotation,
|
|
660
843
|
hasOnClick,
|
|
661
844
|
tooltipClickLabel,
|
|
662
|
-
|
|
845
|
+
...tooltipOptions,
|
|
846
|
+
tickPositions,
|
|
663
847
|
invalidNumberLabel,
|
|
664
848
|
valueFormat
|
|
665
849
|
});
|
|
@@ -714,9 +898,10 @@ function buildBaseChartOptions({
|
|
|
714
898
|
}
|
|
715
899
|
|
|
716
900
|
export {
|
|
901
|
+
datetimeFormatter,
|
|
717
902
|
valueFormatter,
|
|
718
903
|
useSeedsChartSetup,
|
|
719
904
|
ChartRenderer,
|
|
720
905
|
buildBaseChartOptions
|
|
721
906
|
};
|
|
722
|
-
//# sourceMappingURL=chunk-
|
|
907
|
+
//# sourceMappingURL=chunk-ISP4A622.js.map
|