@qkix/strapi-plugin-chartkit 0.1.6 → 0.2.0

package/README.md

@@ -29,7 +29,7 @@
 npm install @qkix/strapi-plugin-chartkit
 ```
 
-Add a **Chart** field to a content type. That's it — no config file, no provider.
+Add a **Chart** field to a content type. That's it - no config file, no provider.
 
 ## Why server-side SVG
 
@@ -42,7 +42,7 @@ receives finished markup:
 
 - **No runtime.** Nothing to download, parse, or execute.
 - **Nothing to hydrate**, so no layout shift and no flash of empty box.
-- **It scales and prints** — it is vector, not a canvas bitmap.
+- **It scales and prints** - it is vector, not a canvas bitmap.
 - **Screen readers get a real description**: `role="img"` with a `<title>` and
   the description you wrote.
 
@@ -53,7 +53,7 @@ receives finished markup:
 Bar, grouped and stacked bars, line, area and stacked area, pie and donut.
 
 Two of those tiles are the details that usually go wrong. A missing reading
-stays a **gap** — never a zero pretending to be a measurement. And negative
+stays a **gap** - never a zero pretending to be a measurement. And negative
 values get a real baseline instead of being flipped or clipped.
 
 ## Editing
@@ -61,12 +61,27 @@ values get a real baseline instead of being flipped or clipped.
 <img src="https://raw.githubusercontent.com/qkix/strapi-plugins/main/packages/strapi-plugin-chartkit/docs/editor.png" alt="The chart editor: live preview, chart settings and a data grid" width="700" />
 
 A live preview above a spreadsheet-style grid. **The preview is the real
-renderer** — the same function that draws the published page — so a chart cannot
+renderer** - the same function that draws the published page - so a chart cannot
 look right here and wrong there.
 
 The editor opens in a dialog. Cancel genuinely cancels: it edits a draft and
 only writes on save.
 
+### Labels are dates
+
+Turn this on and the labels stop being names and become instants: readings are
+placed by _when_ they are, so a day's gap and a fortnight's gap no longer look
+alike. Ticks then come from the calendar rather than from your rows, which is
+what lets a year of daily figures label itself with a few months instead of 365
+smeared dates.
+
+Labels have to be dates for it - ISO 8601, e.g. `2026-08-20`. One that is not is
+named in the editor rather than quietly drawn as a category again.
+
+Off by default, including for labels that look like dates: `2024` and `2025` may
+be two categories you meant to weigh equally, and re-spacing them because they
+parse would be a decision this plugin has no business making for you.
+
 ## Three ways to get the numbers in
 
 Most charts already exist as numbers somewhere, and retyping them is the worst
@@ -80,24 +95,24 @@ part of every charting tool.
 | ------------------------- | ------------------------------------- |
 | tab, comma or semicolon   | detected per paste                    |
 | `1.234,50` and `1,234.50` | 1234.5 either way                     |
-| `€1 234,50`               | 1234.5 — currency and spaces stripped |
+| `€1 234,50`               | 1234.5 - currency and spaces stripped |
 | `"North, inland"`         | one cell; a quoted delimiter survives |
-| `n/a`, `—`, empty         | a **gap**, never a zero               |
+| `n/a`, `-`, empty         | a **gap**, never a zero               |
 
-It shows **what it parsed before replacing anything** — above, four categories,
+It shows **what it parsed before replacing anything** - above, four categories,
 two series, and one unreadable cell called out. The parser has to guess whether
 the first row is a header, and a wrong guess that silently overwrites your data
 is far worse than one you can cancel.
 
 **From the Media Library.** Pick a `.csv`, `.tsv` or `.txt` you already
-uploaded. Anything else is refused before it is fetched — handing a PDF to a CSV
+uploaded. Anything else is refused before it is fetched - handing a PDF to a CSV
 parser produces a confident table of nonsense.
 
 **By hand**, in the grid.
 
 ## Rendering it
 
-The field stores a `ChartSpec` — the same object the renderers take. Nothing
+The field stores a `ChartSpec` - the same object the renderers take. Nothing
 sits in between:
 
 ```tsx
@@ -114,7 +129,17 @@ import { Chart } from '@qkix/chartkit-astro-renderer';
 <Chart spec={article.chart} locale="en-US" />
 ```
 
-Both produce markup at build or request time. Neither ships a runtime.
+```vue
+<script setup>
+import { Chart } from '@qkix/chartkit-vue-renderer';
+</script>
+
+<template>
+  <Chart :spec="article.chart" locale="en-US" />
+</template>
+```
+
+They all produce markup at build or request time. None ships a runtime.
 
 ## It takes your theme, including dark mode
 
@@ -139,7 +164,7 @@ a chart looks like it belongs wherever it lands:
 
 This is the reason the SVG is hand-written rather than produced by an existing
 SSR chart renderer. The obvious candidate, ECharts in SSR mode, writes its
-palette into the markup as literal hex values — which makes class-based dark
+palette into the markup as literal hex values - which makes class-based dark
 mode impossible without post-processing the output.
 
 ## Also a block, if you use Better Blocks
@@ -162,15 +187,15 @@ export default {
 };
 ```
 
-The front end needs its own half — `chartBlockPlugin` from whichever renderer
-you use — or a chart authored in a document is stored correctly and drawn as
+The front end needs its own half - `chartBlockPlugin` from whichever renderer
+you use - or a chart authored in a document is stored correctly and drawn as
 nothing.
 
 ## Field options
 
 | Option                       | Effect                                                                                                                          |
 | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| **Number formatting locale** | How axis numbers are formatted **in the admin preview** — a BCP 47 tag such as `de-DE`. The front end passes its own at render. |
+| **Number formatting locale** | How axis numbers are formatted **in the admin preview** - a BCP 47 tag such as `de-DE`. The front end passes its own at render. |
 | **Required**                 | Standard Strapi validation.                                                                                                     |
 
 ## Old charts stay working
@@ -179,29 +204,35 @@ The spec is versioned, and the field **migrates on read**, so opening a chart
 saved against an older schema edits and saves the current shape. Nothing has to
 be resaved for a site to keep working: `renderChart` migrates in memory too.
 
-If a field holds something that is not a readable chart — a value from an import
-script, or a field that used to be a different type — it says so and goes
+If a field holds something that is not a readable chart - a value from an import
+script, or a field that used to be a different type - it says so and goes
 **read-only** rather than offering to overwrite it.
 
 ## Packages
 
 | Package                                                                                        | For                                                            |
 | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| [`@qkix/strapi-plugin-chartkit`](https://www.npmjs.com/package/@qkix/strapi-plugin-chartkit)   | this plugin — the field in the Strapi admin                    |
+| [`@qkix/strapi-plugin-chartkit`](https://www.npmjs.com/package/@qkix/strapi-plugin-chartkit)   | this plugin - the field in the Strapi admin                    |
 | [`@qkix/chartkit-core`](https://www.npmjs.com/package/@qkix/chartkit-core)                     | the spec, the validator and the SVG renderer. No dependencies. |
 | [`@qkix/chartkit-react-renderer`](https://www.npmjs.com/package/@qkix/chartkit-react-renderer) | rendering a stored chart in React / Next.js                    |
 | [`@qkix/chartkit-astro-renderer`](https://www.npmjs.com/package/@qkix/chartkit-astro-renderer) | rendering a stored chart in Astro                              |
+| [`@qkix/chartkit-vue-renderer`](https://www.npmjs.com/package/@qkix/chartkit-vue-renderer)     | rendering a stored chart in Vue / Nuxt                         |
 | [`@qkix/chartkit-editor`](https://www.npmjs.com/package/@qkix/chartkit-editor)                 | the editing surface, and the ready-made block                  |
 
 ## Not there yet
 
-Being honest about the edges: no time axes, no tooltips or other
-interactivity, and no per-chart color overrides — palettes are set in your site's
-CSS. Data is stored with the chart rather than queried from a collection.
+Being honest about the edges: no tooltips or other interactivity, and no
+per-chart color overrides - palettes are set in your site's CSS. Data is stored
+with the chart rather than queried from a collection.
 
 Issues and ideas welcome at
 [qkix/strapi-plugins](https://github.com/qkix/strapi-plugins/issues).
 
+## Roadmap
+
+What is worth building next, what is deliberately not planned, and why:
+[ROADMAP.md](https://github.com/qkix/strapi-plugins/blob/main/packages/strapi-plugin-chartkit/ROADMAP.md).
+
 ## License
 
 MIT

package/dist/admin/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("react/jsx-runtime"),o=require("@qkix/chartkit-core"),c=(e,t,i)=>{const s=e[t];return s?typeof s=="function"?s():Promise.resolve(s):new Promise((y,u)=>{(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(u.bind(null,new Error("Unknown variable dynamic import: "+t+(t.split("/").length!==i?". Note that variables only represent file names one level deep.":""))))})},r="chartkit",l="chart",d=({setPlugin:e})=>{const t=a.useRef(e);return a.useEffect(()=>{t.current(r)},[]),null},f=()=>n.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[n.jsx("path",{d:"M2 14V2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("path",{d:"M2 14h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("rect",{x:"4",y:"7",width:"2.5",height:"5",fill:"currentColor"}),n.jsx("rect",{x:"8",y:"4",width:"2.5",height:"8",fill:"currentColor"}),n.jsx("rect",{x:"12",y:"9",width:"2.5",height:"3",fill:"currentColor"})]});function p(e){if(e==null||e==="")return{status:"empty"};let t=e;if(typeof e=="string"){try{t=JSON.parse(e)}catch{return{status:"unreadable",reason:"This field contains text that is not JSON."}}if(t===null||t==="")return{status:"empty"}}if(typeof t!="object"||t===null||Array.isArray(t))return{status:"unreadable",reason:"This field contains JSON that is not a chart."};const i=o.migrateChartSpec(t);return i.status==="skipped"?{status:"unreadable",reason:`Chartkit cannot read what is in this field: ${i.reason}.`}:{status:"ok",spec:i.spec}}function h(e){return JSON.stringify(e)}function m(){return{version:o.CHART_SPEC_VERSION,type:"bar",data:{source:"inline",labels:["Q1","Q2","Q3","Q4"],series:[{name:"Series 1",values:[null,null,null,null]}]}}}const g={register(e){e.registerPlugin({id:r,name:r,initializer:d,isReady:!1}),e.customFields.register({name:l,pluginId:r,type:"json",icon:f,intlLabel:{id:`${r}.field.label`,defaultMessage:"Chart"},intlDescription:{id:`${r}.field.description`,defaultMessage:"A chart, rendered as SVG with no client-side JavaScript"},components:{Input:async()=>({default:(await Promise.resolve().then(()=>require("../_chunks/ChartField-CKCDQc6g.js"))).default})},options:{base:[{sectionTitle:{id:`${r}.section.preview`,defaultMessage:"Preview"},items:[{name:"options.previewLocale",type:"text",placeholder:{id:`${r}.previewLocale.placeholder`,defaultMessage:"en-US"},intlLabel:{id:`${r}.previewLocale`,defaultMessage:"Number formatting locale"},description:{id:`${r}.previewLocale.description`,defaultMessage:"How axis numbers are formatted in the admin preview — a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."}}]}],advanced:[{sectionTitle:null,items:[{name:"required",type:"checkbox",intlLabel:{id:`${r}.required`,defaultMessage:"Required field"},description:{id:`${r}.required.description`,defaultMessage:"You won't be able to create an entry if this field is empty"}}]}]}})},async registerTrads({locales:e}){return Promise.all(e.map(async t=>{try{const{default:i}=await c(Object.assign({"./translations/en.json":()=>Promise.resolve().then(()=>require("../_chunks/en-BcPniuRQ.js"))}),`./translations/${t}.json`,3);return{data:i,locale:t}}catch{return{data:{},locale:t}}}))}};exports.FIELD_NAME=l;exports.PLUGIN_ID=r;exports.default=g;exports.readValue=p;exports.starterSpec=m;exports.writeValue=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("react/jsx-runtime"),o=require("@qkix/chartkit-core"),c=(e,t,i)=>{const s=e[t];return s?typeof s=="function"?s():Promise.resolve(s):new Promise((y,u)=>{(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(u.bind(null,new Error("Unknown variable dynamic import: "+t+(t.split("/").length!==i?". Note that variables only represent file names one level deep.":""))))})},r="chartkit",l="chart",d=({setPlugin:e})=>{const t=a.useRef(e);return a.useEffect(()=>{t.current(r)},[]),null},f=()=>n.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[n.jsx("path",{d:"M2 14V2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("path",{d:"M2 14h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),n.jsx("rect",{x:"4",y:"7",width:"2.5",height:"5",fill:"currentColor"}),n.jsx("rect",{x:"8",y:"4",width:"2.5",height:"8",fill:"currentColor"}),n.jsx("rect",{x:"12",y:"9",width:"2.5",height:"3",fill:"currentColor"})]});function p(e){if(e==null||e==="")return{status:"empty"};let t=e;if(typeof e=="string"){try{t=JSON.parse(e)}catch{return{status:"unreadable",reason:"This field contains text that is not JSON."}}if(t===null||t==="")return{status:"empty"}}if(typeof t!="object"||t===null||Array.isArray(t))return{status:"unreadable",reason:"This field contains JSON that is not a chart."};const i=o.migrateChartSpec(t);return i.status==="skipped"?{status:"unreadable",reason:`Chartkit cannot read what is in this field: ${i.reason}.`}:{status:"ok",spec:i.spec}}function h(e){return JSON.stringify(e)}function m(){return{version:o.CHART_SPEC_VERSION,type:"bar",data:{source:"inline",labels:["Q1","Q2","Q3","Q4"],series:[{name:"Series 1",values:[null,null,null,null]}]}}}const g={register(e){e.registerPlugin({id:r,name:r,initializer:d,isReady:!1}),e.customFields.register({name:l,pluginId:r,type:"json",icon:f,intlLabel:{id:`${r}.field.label`,defaultMessage:"Chart"},intlDescription:{id:`${r}.field.description`,defaultMessage:"A chart, rendered as SVG with no client-side JavaScript"},components:{Input:async()=>({default:(await Promise.resolve().then(()=>require("../_chunks/ChartField-CKCDQc6g.js"))).default})},options:{base:[{sectionTitle:{id:`${r}.section.preview`,defaultMessage:"Preview"},items:[{name:"options.previewLocale",type:"text",placeholder:{id:`${r}.previewLocale.placeholder`,defaultMessage:"en-US"},intlLabel:{id:`${r}.previewLocale`,defaultMessage:"Number formatting locale"},description:{id:`${r}.previewLocale.description`,defaultMessage:"How axis numbers are formatted in the admin preview - a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."}}]}],advanced:[{sectionTitle:null,items:[{name:"required",type:"checkbox",intlLabel:{id:`${r}.required`,defaultMessage:"Required field"},description:{id:`${r}.required.description`,defaultMessage:"You won't be able to create an entry if this field is empty"}}]}]}})},async registerTrads({locales:e}){return Promise.all(e.map(async t=>{try{const{default:i}=await c(Object.assign({"./translations/en.json":()=>Promise.resolve().then(()=>require("../_chunks/en-BcPniuRQ.js"))}),`./translations/${t}.json`,3);return{data:i,locale:t}}catch{return{data:{},locale:t}}}))}};exports.FIELD_NAME=l;exports.PLUGIN_ID=r;exports.default=g;exports.readValue=p;exports.starterSpec=m;exports.writeValue=h;

package/dist/admin/index.mjs

@@ -86,7 +86,7 @@ const M = {
       },
       components: {
         // Lazy, so the editor and its data grid are not in the bundle of every
-        // admin page — only of the ones that actually show a chart field.
+        // admin page - only of the ones that actually show a chart field.
         Input: async () => ({
           default: (await import("../_chunks/ChartField-N1BDNZ3c.mjs")).default
         })
@@ -112,7 +112,7 @@ const M = {
                 },
                 description: {
                   id: `${r}.previewLocale.description`,
-                  defaultMessage: "How axis numbers are formatted in the admin preview — a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."
+                  defaultMessage: "How axis numbers are formatted in the admin preview - a BCP 47 tag such as de-DE or pl-PL. Affects the preview only; the front end passes its own locale when it renders. Left empty, the browser's is used."
                 }
               }
             ]

package/dist/admin/src/components/ChartField.d.ts

@@ -2,7 +2,7 @@
  * The chart custom field.
  *
  * A preview, and a button that opens the editor. The editor itself is
- * `@qkix/chartkit-editor` — the same component the chart block inside Better
+ * `@qkix/chartkit-editor` - the same component the chart block inside Better
  * Blocks mounts, which is why it is a package rather than living in one of the
  * two plugins that need it.
  *

package/dist/admin/src/index.d.ts

@@ -10,7 +10,7 @@ declare const _default: {
 export default _default;
 /**
  * Re-exported so an app that stores a chart in this field and renders it
- * elsewhere — a preview route, a custom admin page — does not need a second
+ * elsewhere - a preview route, a custom admin page - does not need a second
  * install to get at the spec's type or to draw one.
  */
 export { readValue, writeValue, starterSpec } from './value';

package/dist/admin/src/value.d.ts

@@ -4,8 +4,8 @@
  * Small, and separated out anyway, because it is where the field can lose
  * someone's work. Strapi hands a custom field whatever is in the document: a
  * JSON string on one code path and an already-parsed object on another, `null`
- * for a new entry, and — for a field that used to be something else, or a
- * document written by an import script — text that is not a chart at all.
+ * for a new entry, and - for a field that used to be something else, or a
+ * document written by an import script - text that is not a chart at all.
  *
  * None of that may throw. A field that throws while rendering takes the whole
  * edit view down, and the author loses every other field on the page along with
@@ -35,14 +35,14 @@ export type ReadValue = {
  * Migrates on the way in, so an author opening a chart saved against an older
  * schema edits the current shape and saves the current shape. `renderChart`
  * migrates in memory too, which is what keeps the published page correct in the
- * meantime — but a document only stops being old once someone writes it back.
+ * meantime - but a document only stops being old once someone writes it back.
  */
 export declare function readValue(value: unknown): ReadValue;
 /**
  * The value to store.
  *
  * A string, because Strapi's `json` custom fields are read back as strings and
- * writing an object here makes the field's own round trip asymmetric — it would
+ * writing an object here makes the field's own round trip asymmetric - it would
  * work until the page is reloaded.
  */
 export declare function writeValue(spec: ChartSpec): string;

package/dist/server/src/index.d.ts

@@ -3,7 +3,7 @@
  *
  * Deliberately just a registration. Charts render from their spec, so there is
  * no chart data to store beyond the field itself, no routes to serve it over
- * and no service to compute it — a Chartkit content type would be a second
+ * and no service to compute it - a Chartkit content type would be a second
  * place for the same numbers to live and drift.
  */
 declare const _default: {

package/dist/server/src/register.d.ts

@@ -2,7 +2,7 @@ import type { Core } from '@strapi/strapi';
 /**
  * Registers the chart custom field.
  *
- * `json`, because a chart is a spec — a type, some labels, some series — and
+ * `json`, because a chart is a spec - a type, some labels, some series - and
  * the alternatives are worse. A relation would need a content type nobody
  * asked for; text would need every consumer to parse it and guess at what
  * failure means.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qkix/strapi-plugin-chartkit",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Charts for Strapi v5, rendered as server-side SVG with no client-side JavaScript",
   "strapi": {
     "kind": "plugin",
@@ -43,8 +43,8 @@
     "dist"
   ],
   "dependencies": {
-    "@qkix/chartkit-core": "^0.2.3",
-    "@qkix/chartkit-editor": "^0.1.5"
+    "@qkix/chartkit-core": "^0.3.0",
+    "@qkix/chartkit-editor": "^0.2.0"
   },
   "devDependencies": {
     "@strapi/sdk-plugin": "^5.3.2",