@pepperui/charts 1.1.0

package/dist/recipes.json

@@ -0,0 +1,178 @@
+{
+  "version": "1.1.0",
+  "theme": {
+    "font": "Poppins, sans-serif",
+    "text": {
+      "slide": {
+        "size": 15,
+        "weight": 400
+      },
+      "web-desktop": {
+        "size": 12,
+        "weight": 500
+      }
+    },
+    "weightStrong": 600,
+    "ink": "#0b0202",
+    "grid": "#00000012",
+    "rest": "#dad9d9",
+    "onFill": "#ffffff",
+    "labelOn": {
+      "blue": {
+        "fill": "#2b25d9",
+        "ink": "#ffffff"
+      },
+      "red": {
+        "fill": "#e42521",
+        "ink": "#ffffff"
+      },
+      "yellow": {
+        "fill": "#f9c426",
+        "ink": "#0b0202"
+      }
+    },
+    "page": "#ffffff",
+    "series": {
+      "blue": [
+        "#2b25d9",
+        "#6a66e4",
+        "#d4d3f7",
+        "#b5b3b3",
+        "#dad9d9"
+      ],
+      "red": [
+        "#e42521",
+        "#ec6663",
+        "#f9d3d2",
+        "#b5b3b3",
+        "#dad9d9"
+      ],
+      "yellow": [
+        "#f9c426",
+        "#858080",
+        "#dad9d9",
+        "#fad567",
+        "#b5b3b3"
+      ],
+      "multicolor": [
+        "#e42521",
+        "#f9c426",
+        "#2b25d9",
+        "#b5b3b3",
+        "#ec6663",
+        "#6a66e4",
+        "#fad567",
+        "#858080"
+      ]
+    },
+    "$sources": {
+      "series.blue.0": "accent.blue.chart.1",
+      "series.blue.1": "accent.blue.chart.2",
+      "series.blue.2": "accent.blue.chart.3",
+      "series.blue.3": "accent.blue.chart.4",
+      "series.blue.4": "accent.blue.chart.5",
+      "series.red.0": "accent.red.chart.1",
+      "series.red.1": "accent.red.chart.2",
+      "series.red.2": "accent.red.chart.3",
+      "series.red.3": "accent.red.chart.4",
+      "series.red.4": "accent.red.chart.5",
+      "series.yellow.0": "accent.yellow.chart.1",
+      "series.yellow.1": "accent.yellow.chart.2",
+      "series.yellow.2": "accent.yellow.chart.3",
+      "series.yellow.3": "accent.yellow.chart.4",
+      "series.yellow.4": "accent.yellow.chart.5",
+      "series.multicolor.0": "accent.multicolor.chart.1",
+      "series.multicolor.1": "accent.multicolor.chart.2",
+      "series.multicolor.2": "accent.multicolor.chart.3",
+      "series.multicolor.3": "accent.multicolor.chart.4",
+      "series.multicolor.4": "accent.multicolor.chart.5",
+      "series.multicolor.5": "accent.blue.chart.2",
+      "series.multicolor.6": "accent.yellow.chart.4",
+      "series.multicolor.7": "accent.yellow.chart.2",
+      "labelOn.blue.fill": "accent.blue.chart.1",
+      "labelOn.blue.ink": "accent.blue.on-accent",
+      "labelOn.red.fill": "accent.red.chart.1",
+      "labelOn.red.ink": "accent.red.on-accent",
+      "labelOn.yellow.fill": "accent.yellow.chart.1",
+      "labelOn.yellow.ink": "accent.yellow.on-accent",
+      "text.slide": "type.slide.label.medium",
+      "text.web-desktop": "type.web-desktop.label.medium",
+      "font": "type.slide.label.medium",
+      "weightStrong": "font.weight.600",
+      "ink": "chart.text",
+      "grid": "chart.grid",
+      "rest": "chart.rest",
+      "onFill": "chart.on-fill",
+      "page": "surface.page"
+    }
+  },
+  "geometry": {
+    "axis": {
+      "baselineWidth": 2,
+      "gridWidth": 1
+    },
+    "bar": {
+      "radius": 4,
+      "maxWidth": 96
+    },
+    "line": {
+      "width": 4,
+      "symbolSize": 9
+    },
+    "area": {
+      "opacity": 0.12,
+      "forecast": {
+        "width": 3,
+        "dash": [
+          6,
+          6
+        ]
+      }
+    },
+    "legend": {
+      "itemWidth": 10,
+      "itemHeight": 10,
+      "itemGap": 18
+    },
+    "grid": {
+      "left": 8,
+      "right": 40,
+      "topWithLegend": 44,
+      "top": 26,
+      "bottom": 4
+    },
+    "category": {
+      "labelGap": 12
+    },
+    "donut": {
+      "labelsOn": false,
+      "cutout": 72,
+      "segmentBorder": 3,
+      "radiusInner": "58%",
+      "radiusOuter": "85%",
+      "groupRingShare": 0.62,
+      "groupGap": 56,
+      "groupLegendMax": 380,
+      "groupLegendCharRatio": 0.55,
+      "groupLegendPad": 34,
+      "groupEdgeMin": 24,
+      "groupLegend": {
+        "itemWidth": 16,
+        "itemHeight": 16,
+        "itemGap": 22,
+        "fontSize": 20
+      },
+      "legend": {
+        "itemWidth": 14,
+        "itemHeight": 14,
+        "itemGap": 16,
+        "fontSize": 16
+      },
+      "unstyled": {
+        "cutout": 70,
+        "segmentBorder": 0,
+        "legendPct": true
+      }
+    }
+  }
+}

package/dist/theme.json

@@ -0,0 +1,106 @@
+{
+  "font": "Poppins, sans-serif",
+  "text": {
+    "slide": {
+      "size": 15,
+      "weight": 400
+    },
+    "web-desktop": {
+      "size": 12,
+      "weight": 500
+    }
+  },
+  "weightStrong": 600,
+  "ink": "#0b0202",
+  "grid": "#00000012",
+  "rest": "#dad9d9",
+  "onFill": "#ffffff",
+  "labelOn": {
+    "blue": {
+      "fill": "#2b25d9",
+      "ink": "#ffffff"
+    },
+    "red": {
+      "fill": "#e42521",
+      "ink": "#ffffff"
+    },
+    "yellow": {
+      "fill": "#f9c426",
+      "ink": "#0b0202"
+    }
+  },
+  "page": "#ffffff",
+  "series": {
+    "blue": [
+      "#2b25d9",
+      "#6a66e4",
+      "#d4d3f7",
+      "#b5b3b3",
+      "#dad9d9"
+    ],
+    "red": [
+      "#e42521",
+      "#ec6663",
+      "#f9d3d2",
+      "#b5b3b3",
+      "#dad9d9"
+    ],
+    "yellow": [
+      "#f9c426",
+      "#858080",
+      "#dad9d9",
+      "#fad567",
+      "#b5b3b3"
+    ],
+    "multicolor": [
+      "#e42521",
+      "#f9c426",
+      "#2b25d9",
+      "#b5b3b3",
+      "#ec6663",
+      "#6a66e4",
+      "#fad567",
+      "#858080"
+    ]
+  },
+  "$sources": {
+    "series.blue.0": "accent.blue.chart.1",
+    "series.blue.1": "accent.blue.chart.2",
+    "series.blue.2": "accent.blue.chart.3",
+    "series.blue.3": "accent.blue.chart.4",
+    "series.blue.4": "accent.blue.chart.5",
+    "series.red.0": "accent.red.chart.1",
+    "series.red.1": "accent.red.chart.2",
+    "series.red.2": "accent.red.chart.3",
+    "series.red.3": "accent.red.chart.4",
+    "series.red.4": "accent.red.chart.5",
+    "series.yellow.0": "accent.yellow.chart.1",
+    "series.yellow.1": "accent.yellow.chart.2",
+    "series.yellow.2": "accent.yellow.chart.3",
+    "series.yellow.3": "accent.yellow.chart.4",
+    "series.yellow.4": "accent.yellow.chart.5",
+    "series.multicolor.0": "accent.multicolor.chart.1",
+    "series.multicolor.1": "accent.multicolor.chart.2",
+    "series.multicolor.2": "accent.multicolor.chart.3",
+    "series.multicolor.3": "accent.multicolor.chart.4",
+    "series.multicolor.4": "accent.multicolor.chart.5",
+    "series.multicolor.5": "accent.blue.chart.2",
+    "series.multicolor.6": "accent.yellow.chart.4",
+    "series.multicolor.7": "accent.yellow.chart.2",
+    "labelOn.blue.fill": "accent.blue.chart.1",
+    "labelOn.blue.ink": "accent.blue.on-accent",
+    "labelOn.red.fill": "accent.red.chart.1",
+    "labelOn.red.ink": "accent.red.on-accent",
+    "labelOn.yellow.fill": "accent.yellow.chart.1",
+    "labelOn.yellow.ink": "accent.yellow.on-accent",
+    "text.slide": "type.slide.label.medium",
+    "text.web-desktop": "type.web-desktop.label.medium",
+    "font": "type.slide.label.medium",
+    "weightStrong": "font.weight.600",
+    "ink": "chart.text",
+    "grid": "chart.grid",
+    "rest": "chart.rest",
+    "onFill": "chart.on-fill",
+    "page": "surface.page"
+  }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pepperui/charts",
+  "version": "1.1.0",
+  "description": "The Mobupps design system's chart theme (DL-10): per-accent series palettes, the two-slice donut rule, the narrow-band axis floor and the shared number-format object, generated from @pepperui/tokens. One palette, four renderers — ECharts, Chart.js, the PPTX exporter and the Figma chart recipes.",
+  "license": "UNLICENSED",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "main": "./dist/pepper-charts.js",
+  "module": "./dist/pepper-charts.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/pepper-charts.mjs",
+      "default": "./dist/pepper-charts.js"
+    },
+    "./theme.json": "./dist/theme.json",
+    "./browser": "./dist/pepper-charts.js",
+    "./src/*": "./src/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/rashidmobupps/pepper-ui.git",
+    "directory": "packages/charts"
+  },
+  "keywords": [
+    "charts",
+    "echarts",
+    "chart.js",
+    "design-system",
+    "data-visualisation",
+    "mobupps",
+    "pepper-ui"
+  ]
+}

package/src/api.js

@@ -0,0 +1,56 @@
+/* ============================================================================
+   api — what the package is, from the outside.
+
+   `dist/pepper-charts.js` assigns this to `window.PepperCharts`; the ESM build
+   exports it as the default and every member by name. The four names Paggy's own
+   code already calls — `renderAll`, `buildOption`, `refit`, `valueFormatter` —
+   keep their signatures exactly, so adopting the package is a delivery, not a
+   rewrite.
+   ============================================================================ */
+const PepperCharts = {
+  /** the package version, and the token build it was generated from */
+  version: VERSION,
+  /** the GENERATED theme: palettes, ink, grid, rest, on-fill, type. Read it, do
+   *  not write it — every value traces to a token through `theme.$sources`. */
+  theme: THEME,
+  /** the chart-recipe geometry (radii, legend markers, grid lanes, donut ring) */
+  geometry: GEOMETRY,
+
+  /* the palette */
+  /** series `i` of `accent`; pass `count` so a TWO-series chart gets RULE 12's `chart/rest` */
+  seriesColor: (accent, i, count) => seriesColor(THEME, accent, i, count),
+  palette,
+  sliceColor: (accent, labels, i, explicit) => sliceColor(THEME, accent, labels, i, explicit),
+  /** the ink of a label written inside `fill` — the accent's own on a main fill, `onFill` elsewhere (D110) */
+  labelInk: (fill) => labelInk(THEME, fill),
+
+  /* the rules */
+  narrowBandFloor,
+  isTwoSlice,
+  /** RULE 9 — one colour per bar for a one-series chart: 'flat' (the accent's
+   *  chart/1), 'tints' (its chart/1–5) or 'multicolor' (the red→yellow→blue→gray
+   *  cycle). All three are correct; this is where every channel reads them. */
+  barColors: (accent, n, treatment) => barColors(THEME, accent, n, treatment),
+  /** RULES 3 and 4 — the four-corner radius of a bar; `stack` is 'last' for the
+   *  top segment of a stack and 'mid' for the ones below it */
+  barRadius,
+  /** the rendered width of a string in the chart's own type (RULE 7, D16) */
+  textWidth,
+  /** a hex at an opacity, as rgba — RULE 10's band in the renderer that wants one value */
+  withAlpha,
+
+  /* the numbers */
+  valueFormatter,
+  formatter,
+
+  /* ECharts */
+  echartsTheme,
+  buildOption,
+
+  /* Chart.js — the same theme as pieces to spread into its options */
+  chartjs,
+
+  /* the DOM adapter */
+  renderAll,
+  refit,
+};

package/src/chartjs.js

@@ -0,0 +1,215 @@
+/* ============================================================================
+   Chart.js — the same theme, the other renderer (3.1.2).
+
+   Chart.js has no option builder here the way ECharts does, and deliberately: its
+   consumers (the quarter builder's six chart layouts) each compose their own chart
+   from a generated template, and what they were repeating was not a chart — it was
+   the same ink, the same grid, the same 15px Poppins and the same 4px bar top,
+   typed out thirty-odd times. So this part hands out those PIECES, each one a plain
+   object ready to spread into a Chart.js option:
+
+     ticks: PepperCharts.chartjs.text(),
+     grid:  PepperCharts.chartjs.grid(), border: { display: false },
+     ...PepperCharts.chartjs.bar(),
+
+   `defaults()` sets the globals once, and everything below is what a chart still has
+   to say for itself. Same THEME as the ECharts side, so the two renderers cannot
+   disagree about a colour (DL-10, G13).
+   ============================================================================ */
+
+/** Apply the house globals to `Chart.defaults`. Call it once, after Chart.js loads.
+ *  Returns what it set, so a caller can log or assert it. */
+function chartjsDefaults(canvas, Chart) {
+  const C = Chart || (typeof window !== 'undefined' ? window.Chart : undefined);
+  const t = chartText(canvas);
+  const set = { 'font.family': THEME.font, 'font.size': t.size, color: THEME.ink };
+  if (C && C.defaults) {
+    C.defaults.font.family = THEME.font;
+    C.defaults.font.size = t.size;
+    C.defaults.color = THEME.ink;
+  }
+  return set;
+}
+
+/** The accent's series colours, as Chart.js wants them: a plain array. `count` is how many series
+ *  the chart draws — with exactly two, RULE 12 makes the second one `chart/rest`. */
+function chartjsPalette(accent, count) {
+  const base = (THEME.series[accent] || THEME.series.blue).slice();
+  if (count === 2) return [base[0], THEME.rest];
+  return base;
+}
+
+/** A font block on its own: the canvas role's size (or an override) and the family.
+ *  A total drawn bigger than its bars is the chart's own decision, not the theme's,
+ *  so a size may be passed; the family never varies. */
+function chartjsFont(canvas, size, weight) {
+  return { size: size || chartText(canvas).size, family: THEME.font, ...(weight ? { weight } : {}) };
+}
+
+/** Text in a chart — ticks, legend labels, anything Chart.js styles with
+ *  `{ font, color }`. No family: `defaults()` set it globally, and the smaller the
+ *  option the easier it is to read what a chart actually overrides. */
+function chartjsText(canvas, size) {
+  return { font: { size: size || chartText(canvas).size }, color: THEME.ink };
+}
+
+/** The same, with the family stated. The datalabels plugin draws on its own canvas
+ *  context and does not inherit `Chart.defaults.font.family`, so a data label says
+ *  the family itself. */
+function chartjsLabel(canvas, size, weight) {
+  return { font: chartjsFont(canvas, size, weight), color: THEME.ink };
+}
+
+/** RULE 2 — a light line at every tick, behind the bars. */
+function chartjsGrid() { return { color: THEME.grid, lineWidth: GEOMETRY.axis.gridWidth }; }
+
+/** A value axis draws no line of its own. */
+function chartjsBorder() { return { display: false }; }
+
+/** RULE 1 — the baseline the columns stand on: `chart/rest` at 2px, heavier than
+ *  the grid. It goes on the CATEGORY axis, whose border is the line at zero. Until
+ *  2026-09-21 this file said *"the axis line that is never drawn"* and meant it —
+ *  the first thing he marked on the audit (D1). */
+function chartjsBaseline() {
+  return { display: true, color: THEME.rest, width: GEOMETRY.axis.baselineWidth };
+}
+
+/** RULE 3 — a bar dataset's house shape: 4px on the top corners, square at the
+ *  foot. `borderSkipped: false` used to round the bottom too, so a deck's column
+ *  floated as a pill while the same column in a dashboard sat flat (D2); Chart.js'
+ *  own default skips the start edge, which is exactly the rule. */
+function chartjsBar() {
+  return { borderRadius: GEOMETRY.bar.radius };
+}
+
+/** RULE 4 — a segment of a STACKED bar: the top one rounds, the joints stay
+ *  square. `last` is true for the dataset drawn at the top of the stack. */
+function chartjsStacked(last) {
+  return { borderRadius: last ? GEOMETRY.bar.radius : 0 };
+}
+
+/** RULE 5 — a line dataset: the 4px spline with a dot at every point. The dots
+ *  reverse what this renderer drew until 2026-09-21; ECharts drew them, Chart.js
+ *  did not, and he picked them on the pair (D14). */
+function chartjsLine() {
+  return {
+    borderWidth: GEOMETRY.line.width,
+    pointRadius: GEOMETRY.line.symbolSize / 2,
+    pointHoverRadius: GEOMETRY.line.symbolSize / 2,
+    tension: 0.35,
+  };
+}
+
+/** RULES 10 and 11 — the forecast band and the dashed line over it, as the two
+ *  dataset blocks a Chart.js consumer spreads. `accent` picks the band's colour;
+ *  the line is that accent's `chart/4`. */
+function chartjsArea(accent) {
+  return {
+    ...chartjsLine(),
+    pointRadius: 0,
+    fill: 'origin',
+    backgroundColor: withAlpha(seriesColor(THEME, accent, 0), GEOMETRY.area.opacity),
+    borderColor: seriesColor(THEME, accent, 0),
+  };
+}
+
+function chartjsForecast(accent) {
+  const c = seriesColor(THEME, accent, 3);
+  return {
+    borderWidth: GEOMETRY.area.forecast.width,
+    borderDash: GEOMETRY.area.forecast.dash.slice(),
+    borderColor: c,
+    pointRadius: 0,
+    fill: false,
+    tension: 0.35,
+  };
+}
+
+/** RULE 9 — the three treatments of a ONE-SERIES chart, as the per-bar colour
+ *  array Chart.js takes. This is what the renderer did not have: a deck painted a
+ *  multicolor chart entirely red and could not follow the three-colour rule, and
+ *  the site wrote its own cycler because the package handed it none (D17). One
+ *  rule, one place, three consumers. */
+function chartjsBarColors(accent, n, treatment) {
+  return barColors(THEME, accent, n, treatment);
+}
+
+/** A doughnut: the ring and its borders. `cutout` overrides the house 72% for a
+ *  consumer that draws a thinner ring, and is a stated substitution when it does. */
+function chartjsDoughnut(cutout) {
+  return {
+    cutout: (cutout == null ? GEOMETRY.donut.cutout : cutout) + '%',
+    borderWidth: GEOMETRY.donut.segmentBorder,
+    borderColor: THEME.onFill,
+  };
+}
+
+/** The legend block: circular markers in the chart's own text. `extra` is merged
+ *  into `labels`, which is where a consumer puts its padding or its
+ *  `generateLabels`. */
+function chartjsLegendLabels(canvas, extra) {
+  return {
+    ...chartjsText(canvas),
+    usePointStyle: true,
+    pointStyle: 'circle',
+    ...(extra || {}),
+  };
+}
+
+function chartjsLegend(canvas, extra) {
+  return { labels: chartjsLegendLabels(canvas, extra) };
+}
+
+/** A value axis: the grid, no border, the ticks in chart text, and — when the data
+ *  is handed in — the narrow-band floor as `min`, so a Chart.js chart of uptime
+ *  reads the way the ECharts one does. An explicit `min` always wins. */
+function chartjsValueAxis(canvas, opts) {
+  const o = opts || {};
+  const floor = o.values ? narrowBandFloor(o.values) : undefined;
+  const min = o.min != null ? o.min : floor;
+  return {
+    ...(min != null ? { min } : {}),
+    ...(o.max != null ? { max: o.max } : {}),
+    ticks: { ...chartjsText(canvas), ...(o.ticks || {}) },
+    grid: chartjsGrid(),
+    border: chartjsBorder(),
+  };
+}
+
+/** A category axis: no grid, the baseline, every label kept. */
+function chartjsCategoryAxis(canvas, opts) {
+  const o = opts || {};
+  return {
+    ticks: { autoSkip: false, ...chartjsText(canvas, o.size), ...(o.ticks || {}) },
+    grid: { display: false },
+    // RULE 1 — the category axis carries the baseline
+    border: chartjsBaseline(),
+  };
+}
+
+/** Everything above, as one object — `PepperCharts.chartjs.*`. */
+const chartjs = {
+  defaults: chartjsDefaults,
+  palette: chartjsPalette,
+  color: (accent, i, count) => seriesColor(THEME, accent, i, count),
+  ink: () => THEME.ink,
+  family: () => THEME.font,
+  size: (canvas) => chartText(canvas).size,
+  font: chartjsFont,
+  text: chartjsText,
+  label: chartjsLabel,
+  labels: chartjsLegendLabels,
+  grid: chartjsGrid,
+  border: chartjsBorder,
+  baseline: chartjsBaseline,
+  bar: chartjsBar,
+  stacked: chartjsStacked,
+  line: chartjsLine,
+  area: chartjsArea,
+  forecast: chartjsForecast,
+  barColors: chartjsBarColors,
+  doughnut: chartjsDoughnut,
+  legend: chartjsLegend,
+  valueAxis: chartjsValueAxis,
+  categoryAxis: chartjsCategoryAxis,
+};