@pushwoosh/kit-charts 0.0.2 → 0.0.4

package/core/types/formatter.d.ts

@@ -35,7 +35,7 @@ export interface TooltipNeighbour {
     y: number | null;
     index: number;
 }
-export interface TooltipPoint<TSeriesMeta = unknown> {
+export interface TooltipPoint<TSeriesMeta = unknown, TPointMeta = unknown> {
     seriesIndex: number;
     seriesName: string;
     color: string;
@@ -44,16 +44,18 @@ export interface TooltipPoint<TSeriesMeta = unknown> {
     value: number | null;
     index: number;
     meta: TSeriesMeta | undefined;
+    /** The hovered point's own `meta` — what `onPointClick` reports, at hover time. */
+    pointMeta: TPointMeta | undefined;
     prev: TooltipNeighbour | undefined;
     next: TooltipNeighbour | undefined;
 }
-export interface TooltipContext<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipContext<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     x: number | string;
-    points: readonly TooltipPoint<TSeriesMeta>[];
+    points: readonly TooltipPoint<TSeriesMeta, TPointMeta>[];
     chart: {
         title: string | undefined;
         meta: TChartMeta | undefined;
     };
 }
-export type TooltipFormatter<TChartMeta = unknown, TSeriesMeta = unknown> = (ctx: TooltipContext<TChartMeta, TSeriesMeta>) => ReactNode;
-export type TooltipCellFormatter<TSeriesMeta = unknown> = (point: TooltipPoint<TSeriesMeta>) => ReactNode;
+export type TooltipFormatter<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> = (ctx: TooltipContext<TChartMeta, TSeriesMeta, TPointMeta>) => ReactNode;
+export type TooltipCellFormatter<TSeriesMeta = unknown, TPointMeta = unknown> = (point: TooltipPoint<TSeriesMeta, TPointMeta>) => ReactNode;

package/core/types/options.d.ts

@@ -175,36 +175,36 @@ export interface LegendOptions<TSeriesMeta = unknown> {
     symbolPadding?: number;
     labelFormatter?: LegendLabelFormatter<TSeriesMeta>;
 }
-export interface TooltipTableColumn<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipTableColumn<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     /**
      * A function is resolved per hover, and one that returns `null` drops the whole
      * column: that is how a "vs the previous point" column names the date it
      * compares against and disappears on the first point, where there is none.
      */
-    title?: string | TooltipFormatter<TChartMeta, TSeriesMeta>;
+    title?: string | TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     align?: 'left' | 'right';
-    cell: TooltipCellFormatter<TSeriesMeta>;
+    cell: TooltipCellFormatter<TSeriesMeta, TPointMeta>;
 }
 /**
  * Lays the tooltip out as a table: a header line, a heading row, and one row per
  * series with its swatch. Use it when a point carries more than one figure —
  * a count and its share of the whole — and a single line would run them together.
  */
-export interface TooltipTableOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipTableOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     /** The line above the table. Defaults to the formatted x. */
-    header?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    header?: TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     /** Heading over the series-name column. */
     seriesTitle?: string;
-    columns: readonly TooltipTableColumn<TChartMeta, TSeriesMeta>[];
+    columns: readonly TooltipTableColumn<TChartMeta, TSeriesMeta, TPointMeta>[];
 }
-export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown> {
+export interface TooltipOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> {
     enabled?: boolean;
     shared?: boolean;
-    table?: TooltipTableOptions<TChartMeta, TSeriesMeta>;
+    table?: TooltipTableOptions<TChartMeta, TSeriesMeta, TPointMeta>;
     /** `callout` anchors a beaked bubble to the point; `box` floats near the cursor. */
     shape?: 'callout' | 'box';
     followPointer?: boolean;
-    formatter?: TooltipFormatter<TChartMeta, TSeriesMeta>;
+    formatter?: TooltipFormatter<TChartMeta, TSeriesMeta, TPointMeta>;
     dateFormat?: string;
     valuePrefix?: string;
     valueSuffix?: string;
@@ -298,6 +298,8 @@ export interface SeriesOptionsBase<TSeriesMeta = unknown, TPointMeta = unknown>
      */
     borderPosition?: 'all' | 'top';
     fillOpacity?: number;
+    /** The body's own colour, where the fill is not a wash of the series colour. */
+    fillColor?: string;
     pointPadding?: number;
     groupPadding?: number;
     minPointLength?: number;
@@ -321,7 +323,7 @@ export interface ChartOptions<TChartMeta = unknown, TSeriesMeta = unknown, TPoin
     yAxis?: AxisOptions | readonly AxisOptions[];
     colorAxis?: ColorAxisOptions;
     legend?: LegendOptions<TSeriesMeta>;
-    tooltip?: TooltipOptions<TChartMeta, TSeriesMeta>;
+    tooltip?: TooltipOptions<TChartMeta, TSeriesMeta, TPointMeta>;
     plotOptions?: PlotOptions<TSeriesMeta, TPointMeta>;
     series?: readonly SeriesOptionsBase<TSeriesMeta, TPointMeta>[];
     colors?: readonly string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
     "@pushwoosh/kit-constants": "^1.8.0"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.0.0",
+    "@pushwoosh/frontend-builder-engine": "^3.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",

package/presets/AreaChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function AreaChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function AreaChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/ColumnChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function ColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function ColumnChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/LineChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function LineChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function LineChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/PieChart.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
-export declare function PieChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function PieChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: ChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/presets/StackedColumnChart.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type ChartProps } from '../core/Chart/Chart';
 import { type Stacking } from '../core/types/options';
-export interface StackedColumnChartProps<TChartMeta = unknown, TSeriesMeta = unknown> extends ChartProps<TChartMeta, TSeriesMeta> {
+export interface StackedColumnChartProps<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown> extends ChartProps<TChartMeta, TSeriesMeta, TPointMeta> {
     stacking?: Stacking;
 }
-export declare function StackedColumnChart<TChartMeta = unknown, TSeriesMeta = unknown>(props: StackedColumnChartProps<TChartMeta, TSeriesMeta>): ReactElement;
+export declare function StackedColumnChart<TChartMeta = unknown, TSeriesMeta = unknown, TPointMeta = unknown>(props: StackedColumnChartProps<TChartMeta, TSeriesMeta, TPointMeta>): ReactElement;

package/series/area/area.js

@@ -13,7 +13,6 @@ export const area = {
   },
   extendDomain: (series, acc) => includeZero(series, acc),
   render: ctx => {
-    var _ctx$hovered, _ctx$series$marker;
     const slots = projectSeries(ctx);
     const projected = drawable(slots);
     if (!projected.length) {
@@ -21,14 +20,14 @@ export const area = {
     }
     const color = ctx.color;
     const lineWidth = ctx.series.lineWidth ?? 2;
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const hovered = hoveredIndex === undefined ? undefined : projected.find(({
       point
     }) => point.index === hoveredIndex);
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toAreaPath(slots),
-        fill: color,
+        fill: ctx.series.fillColor ?? color,
         fillOpacity: ctx.series.fillOpacity ?? DEFAULT_FILL_OPACITY,
         stroke: "none"
       }), lineWidth ? _jsx("path", {
@@ -45,7 +44,7 @@ export const area = {
       }), hovered ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
-        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        r: ctx.series.marker?.states?.hover?.radius ?? 4,
         fill: color,
         stroke: "#FFFFFF",
         strokeWidth: 2

package/series/column/column.js

@@ -42,12 +42,11 @@ function toBars(ctx) {
   });
 }
 const fillOf = (ctx, bar, hovered) => {
-  var _ctx$series$states;
   const base = bar.point.color ?? ctx.color;
   if (!hovered) {
     return base;
   }
-  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
 };
 /**
  * A translucent body under a solid rule is the funnel look: the series keeps its
@@ -55,12 +54,11 @@ const fillOf = (ctx, bar, hovered) => {
  * bar is washed out. Hovering deepens it.
  */
 const opacityOf = (ctx, hovered) => {
-  var _ctx$series$states2;
   const base = ctx.series.fillOpacity;
   if (!hovered) {
     return base;
   }
-  return ((_ctx$series$states2 = ctx.series.states) === null || _ctx$series$states2 === void 0 || (_ctx$series$states2 = _ctx$series$states2.hover) === null || _ctx$series$states2 === void 0 ? void 0 : _ctx$series$states2.fillOpacity) ?? base;
+  return ctx.series.states?.hover?.fillOpacity ?? base;
 };
 export const column = {
   type: 'column',
@@ -71,12 +69,11 @@ export const column = {
   exit: 'collapse',
   extendDomain: (series, acc) => includeZero(series, acc),
   render: ctx => {
-    var _ctx$hovered;
     const bars = toBars(ctx);
     if (!bars.length) {
       return null;
     }
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const radius = ctx.series.borderRadius;
     const borderWidth = ctx.series.borderWidth ?? 0;
     const capped = borderWidth > 0 && ctx.series.borderPosition === 'top';
@@ -120,7 +117,6 @@ export const column = {
     });
   },
   hitTest: (ctx, pointer) => {
-    var _ctx$slot;
     const bars = toBars(ctx);
     if (!bars.length) {
       return null;
@@ -130,7 +126,7 @@ export const column = {
     if (pointer.y < top || pointer.y > bottom) {
       return null;
     }
-    const step = ((_ctx$slot = ctx.slot) === null || _ctx$slot === void 0 ? void 0 : _ctx$slot.step) ?? ctx.plot.width / 2;
+    const step = ctx.slot?.step ?? ctx.plot.width / 2;
     let candidate;
     let candidateGap = Infinity;
     bars.forEach(bar => {

package/series/heatmap/heatmap.js

@@ -74,18 +74,16 @@ function toCells(ctx) {
   }, []);
 }
 const fillOf = (ctx, cell, hovered) => {
-  var _ctx$scales$color, _ctx$series$states;
-  const scaled = cell.point.value === null ? undefined : (_ctx$scales$color = ctx.scales.color) === null || _ctx$scales$color === void 0 ? void 0 : _ctx$scales$color.map(cell.point.value);
+  const scaled = cell.point.value === null ? undefined : ctx.scales.color?.map(cell.point.value);
   const base = cell.point.color ?? scaled ?? ctx.color;
   if (!hovered) {
     return base;
   }
-  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
 };
 const labelX = (ctx, cell) => {
-  var _ctx$series$dataLabel, _ctx$series$dataLabel2;
-  const padding = ((_ctx$series$dataLabel = ctx.series.dataLabels) === null || _ctx$series$dataLabel === void 0 ? void 0 : _ctx$series$dataLabel.padding) ?? VALUE_LABEL_GAP;
-  const align = (_ctx$series$dataLabel2 = ctx.series.dataLabels) === null || _ctx$series$dataLabel2 === void 0 ? void 0 : _ctx$series$dataLabel2.align;
+  const padding = ctx.series.dataLabels?.padding ?? VALUE_LABEL_GAP;
+  const align = ctx.series.dataLabels?.align;
   if (align === 'left') {
     return cell.x + padding;
   }
@@ -117,12 +115,11 @@ export const heatmap = {
     };
   },
   render: ctx => {
-    var _ctx$hovered;
     const cells = toCells(ctx);
     if (!cells.length) {
       return null;
     }
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const borderWidth = ctx.series.borderWidth ?? 0;
     const radius = ctx.series.borderRadius;
     return _jsxs("g", {

package/series/line/line.js

@@ -11,14 +11,13 @@ export const line = {
   },
   extendDomain: (_series, acc) => acc,
   render: ctx => {
-    var _ctx$hovered, _ctx$series$marker;
     const slots = projectSeries(ctx);
     const projected = drawable(slots);
     if (!projected.length) {
       return null;
     }
     const color = ctx.color;
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const hovered = hoveredIndex === undefined ? undefined : projected.find(({
       point
     }) => point.index === hoveredIndex);
@@ -37,7 +36,7 @@ export const line = {
       }), hovered ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
-        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        r: ctx.series.marker?.states?.hover?.radius ?? 4,
         fill: color,
         stroke: "#FFFFFF",
         strokeWidth: 2

package/series/pie/pie.js

@@ -95,11 +95,10 @@ function Labels({
   geometry
 }) {
   const labels = ctx.series.dataLabels;
-  if (!(labels !== null && labels !== void 0 && labels.enabled)) {
+  if (!labels?.enabled) {
     return null;
   }
   return slices.filter(slice => !slice.hidden).map(slice => {
-    var _labels$style, _labels$style2, _labels$style3, _labels$style4;
     const mid = (slice.from + slice.to) / 2;
     const at = polar(geometry.cx, geometry.cy, geometry.outer + LABEL_OFFSET, mid);
     const text = labels.formatter ? labels.formatter({
@@ -116,10 +115,10 @@ function Labels({
       y: at.y,
       textAnchor: Math.cos(mid) < 0 ? 'end' : 'start',
       dominantBaseline: "middle",
-      fill: labels.color ?? ((_labels$style = labels.style) === null || _labels$style === void 0 ? void 0 : _labels$style.color),
-      fontFamily: (_labels$style2 = labels.style) === null || _labels$style2 === void 0 ? void 0 : _labels$style2.fontFamily,
-      fontSize: ((_labels$style3 = labels.style) === null || _labels$style3 === void 0 ? void 0 : _labels$style3.fontSize) ?? '11px',
-      fontWeight: (_labels$style4 = labels.style) === null || _labels$style4 === void 0 ? void 0 : _labels$style4.fontWeight,
+      fill: labels.color ?? labels.style?.color,
+      fontFamily: labels.style?.fontFamily,
+      fontSize: labels.style?.fontSize ?? '11px',
+      fontWeight: labels.style?.fontWeight,
       children: text
     }, `label-${slice.point.index}`);
   });
@@ -134,7 +133,6 @@ function Labels({
 function Slices({
   ctx
 }) {
-  var _ctx$hovered;
   const slices = toSlices(ctx);
   const alive = ctx.points.some(point => !ctx.hiddenPoints.has(point.index));
   const targets = [...slices.flatMap(slice => [slice.from, slice.to]), ctx.hidden || !alive ? 0 : 1];
@@ -144,7 +142,7 @@ function Slices({
   }
   const radiusScale = tweened[tweened.length - 1] ?? 1;
   const geometry = geometryOf(ctx, radiusScale);
-  const hovered = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+  const hovered = ctx.hovered?.pointIndex;
   const drawn = slices.map((slice, index) => ({
     ...slice,
     from: tweened[index * 2] ?? slice.from,

package/series/shared/DataLabels.js

@@ -13,11 +13,11 @@ export const labelAnchor = align => {
   return 'middle';
 };
 const textProps = style => ({
-  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-  fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
-  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-  fontStyle: style === null || style === void 0 ? void 0 : style.fontStyle,
-  paintOrder: (style === null || style === void 0 ? void 0 : style.textOutline) === 'none' ? undefined : 'stroke'
+  fontFamily: style?.fontFamily,
+  fontSize: style?.fontSize,
+  fontWeight: style?.fontWeight,
+  fontStyle: style?.fontStyle,
+  paintOrder: style?.textOutline === 'none' ? undefined : 'stroke'
 });
 /** No formatter and no format string: the chart's own number rule prints it. */
 const defaultLabel = (ctx, format, y) => {
@@ -44,7 +44,7 @@ export function DataLabels({
   positionOf
 }) {
   const options = ctx.series.dataLabels;
-  if (!(options !== null && options !== void 0 && options.enabled)) {
+  if (!options?.enabled) {
     return null;
   }
   const turbo = ctx.series.turboThreshold;
@@ -110,12 +110,12 @@ export function DataLabels({
       x: at.x,
       y: y,
       textAnchor: anchor,
-      fill: options.color ?? (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
+      fill: options.color ?? style?.color ?? DEFAULT_TEXT_COLOR,
       ...textProps(style),
       children: lines && lines.length > 1 ? lines.map((text, index) => _jsx("tspan", {
         x: at.x,
         dy: index === 0 ? 0 : textHeight(secondary ?? style),
-        fill: index === 0 ? undefined : secondary === null || secondary === void 0 ? void 0 : secondary.color,
+        fill: index === 0 ? undefined : secondary?.color,
         ...(index === 0 ? {} : textProps(secondary)),
         children: text
       }, `line-${index}`)) : content

package/series/shared/Markers.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const markerRadius = marker => (marker === null || marker === void 0 ? void 0 : marker.radius) ?? (marker !== null && marker !== void 0 && marker.width ? marker.width / 2 : 3);
+const markerRadius = marker => marker?.radius ?? (marker?.width ? marker.width / 2 : 3);
 export function Markers({
   marker,
   projected,
   color
 }) {
-  if ((marker === null || marker === void 0 ? void 0 : marker.enabled) === false || (marker === null || marker === void 0 ? void 0 : marker.symbol) === 'none') {
+  if (marker?.enabled === false || marker?.symbol === 'none') {
     return null;
   }
   const radius = markerRadius(marker);
-  const fill = (marker === null || marker === void 0 ? void 0 : marker.fillColor) ?? color;
-  const square = (marker === null || marker === void 0 ? void 0 : marker.symbol) === 'square';
+  const fill = marker?.fillColor ?? color;
+  const square = marker?.symbol === 'square';
   return projected.map(({
     point,
     px,
@@ -21,14 +21,14 @@ export function Markers({
     width: radius * 2,
     height: radius * 2,
     fill: fill,
-    stroke: marker === null || marker === void 0 ? void 0 : marker.lineColor,
-    strokeWidth: marker === null || marker === void 0 ? void 0 : marker.lineWidth
+    stroke: marker?.lineColor,
+    strokeWidth: marker?.lineWidth
   }, `m-${point.index}`) : _jsx("circle", {
     cx: px,
     cy: py,
     r: radius,
     fill: fill,
-    stroke: marker === null || marker === void 0 ? void 0 : marker.lineColor,
-    strokeWidth: marker === null || marker === void 0 ? void 0 : marker.lineWidth
+    stroke: marker?.lineColor,
+    strokeWidth: marker?.lineWidth
   }, `m-${point.index}`));
 }