@krizaka/charts 0.1.0 → 0.2.1

package/registry/goal-progress.json

@@ -0,0 +1,520 @@
+{
+  "name": "goal-progress",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Goal progress",
+  "summary": "A pot towards its goal, in money: an arc that fills, “raised of $500” under the amount, the supporters and the time left.",
+  "description": "A pot towards its goal, in money: an arc that fills, “raised of $500” under the amount, the supporters and the time left.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "both",
+  "engine": "svg",
+  "tier": "ready-made",
+  "whenToUse": [
+    "An Orochia challenge with a goal: what fans pledged so far, on the web and in the app.",
+    "A crowdfunded request: the amount raised, the supporters, the deadline."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "An allowance that runs out.",
+      "use": "credit-usage"
+    },
+    {
+      "when": "A value in a range that is not money raised.",
+      "use": "gauge"
+    }
+  ],
+  "bestPractices": [
+    "Pass amounts in minor units and the currency.",
+    "Write the time left with the app's countdown and pass it in `timeLeft`.",
+    "Past the goal the amount keeps counting and the arc stays full, in the success tone."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "The gauge is a `meter`: the amount and “raised of $500” are its value in words.",
+      "“Goal reached” is written, never only shown by a colour."
+    ]
+  },
+  "related": [
+    "gauge",
+    "credit-usage",
+    "price-ticker"
+  ],
+  "source": "packages/charts/src/meta/goal-progress.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/goal",
+    "import": "import { GoalProgress } from \"@krizaka/charts/goal\";",
+    "props": [
+      {
+        "component": "GoalProgress",
+        "description": "A pot towards its goal, in money: the arc fills, the words say how much of what, and who chipped in.",
+        "props": [
+          {
+            "name": "currency",
+            "type": "string",
+            "default": null,
+            "description": "The ISO 4217 currency.",
+            "required": true
+          },
+          {
+            "name": "goal",
+            "type": "number",
+            "default": null,
+            "description": "The goal, in minor units.",
+            "required": true
+          },
+          {
+            "name": "raised",
+            "type": "number",
+            "default": null,
+            "description": "The amount raised, in **minor units** (cents).",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A sentence under the title: the period, the unit, the source.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the figure.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<GoalLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way: a skeleton of the chart, announced once.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "default": null,
+            "description": "Inline style on the figure (layout only: colours come from the tokens).",
+            "required": false
+          },
+          {
+            "name": "summary",
+            "type": "\"hidden\" | \"visible\"",
+            "default": null,
+            "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+            "required": false
+          },
+          {
+            "name": "summaryText",
+            "type": "string",
+            "default": null,
+            "description": "Your own summary instead of the generated one (still read first by screen readers).",
+            "required": false
+          },
+          {
+            "name": "supporters",
+            "type": "number",
+            "default": null,
+            "description": "How many people chipped in.",
+            "required": false
+          },
+          {
+            "name": "timeLeft",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The time left, written by the app (a `Countdown`, “2 days”).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "challenge-pot",
+        "title": "A challenge's pot",
+        "description": "An Orochia goal halfway there, its supporters and the time left.",
+        "path": "examples/goal-progress/challenge-pot.tsx",
+        "module": "@krizaka/charts/registry/examples/goal-progress/challenge-pot",
+        "code": "import { GoalProgress } from \"@krizaka/charts/goal\";\n\n// An Orochia challenge: fans pledge towards a goal, held in escrow until it is met.\nexport default function ChallengePot() {\n  return (\n    <GoalProgress\n      title=\"Backflip on the beach\"\n      raised={262_00}\n      goal={500_00}\n      currency=\"USD\"\n      supporters={41}\n      timeLeft=\"3 days\"\n      height={200}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "goal-reached",
+        "title": "Goal reached",
+        "description": "Past the goal: the success tone, the amount still counting.",
+        "path": "examples/goal-progress/goal-reached.tsx",
+        "module": "@krizaka/charts/registry/examples/goal-progress/goal-reached",
+        "code": "import { GoalProgress } from \"@krizaka/charts/goal\";\n\n// Past the goal: the arc stays full, the amount keeps counting, “Goal reached” is written.\nexport default function GoalReached() {\n  return <GoalProgress title=\"Cover of the summer hit\" raised={1_180_00} goal={1_000_00} currency=\"EUR\" supporters={128} height={200} locale=\"fr-FR\" labels={{ raised: \"collectés sur {goal}\", reached: \"Objectif atteint\", supporters: \"{count} soutiens\" }} />;\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/charts/native",
+    "import": "import { GoalProgress } from \"@krizaka/charts/native\";",
+    "differences": [
+      "`timeLeft` is a string (the app writes it); the facts are written under the gauge."
+    ],
+    "props": [
+      {
+        "component": "GoalProgress",
+        "description": "A pot towards its goal, in money (React Native): the arc fills, the words say how much of what.",
+        "props": [
+          {
+            "name": "currency",
+            "type": "string",
+            "default": null,
+            "description": "The ISO 4217 currency.",
+            "required": true
+          },
+          {
+            "name": "goal",
+            "type": "number",
+            "default": null,
+            "description": "The goal, in minor units.",
+            "required": true
+          },
+          {
+            "name": "raised",
+            "type": "number",
+            "default": null,
+            "description": "The amount raised, in minor units.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows: its heading and accessible name.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette leads. Default Krizaka.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The plot's height.",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Hide the heading (it stays the accessible name).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<GoalLabels>",
+            "default": null,
+            "description": "The words, passed translated.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date. Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "Mode",
+            "default": null,
+            "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "ViewStyle",
+            "default": null,
+            "description": "The style of the chart's container (layout only: colours come from the theme).",
+            "required": false
+          },
+          {
+            "name": "supporters",
+            "type": "number",
+            "default": null,
+            "description": "How many people chipped in.",
+            "required": false
+          },
+          {
+            "name": "theme",
+            "type": "Partial<ChartTheme>",
+            "default": null,
+            "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
+            "required": false
+          },
+          {
+            "name": "timeLeft",
+            "type": "string",
+            "default": null,
+            "description": "The time left, written by the app (“2 days”).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "challenge-pot",
+        "title": "A challenge's pot",
+        "description": "The challenge screen of the app.",
+        "path": "examples/goal-progress/native/challenge-pot.tsx",
+        "module": "@krizaka/charts/registry/examples/goal-progress/native/challenge-pot",
+        "code": "import { GoalProgress } from \"@krizaka/charts/native\";\n\n// The challenge screen of the app.\nexport default function NativeChallengePot() {\n  return <GoalProgress title=\"Backflip on the beach\" raised={262_00} goal={500_00} currency=\"USD\" supporters={41} timeLeft=\"3 days\" height={180} />;\n}\n",
+        "screenshots": {
+          "dark": "examples/goal-progress/native/challenge-pot.dark.png",
+          "light": "examples/goal-progress/native/challenge-pot.light.png"
+        }
+      }
+    ]
+  },
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/goal-progress/challenge-pot.tsx",
+    "content": "import { GoalProgress } from \"@krizaka/charts/goal\";\n\n// An Orochia challenge: fans pledge towards a goal, held in escrow until it is met.\nexport default function ChallengePot() {\n  return (\n    <GoalProgress\n      title=\"Backflip on the beach\"\n      raised={262_00}\n      goal={500_00}\n      currency=\"USD\"\n      supporters={41}\n      timeLeft=\"3 days\"\n      height={200}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "GoalProgress",
+      "description": "A pot towards its goal, in money: the arc fills, the words say how much of what, and who chipped in.",
+      "props": [
+        {
+          "name": "currency",
+          "type": "string",
+          "default": null,
+          "description": "The ISO 4217 currency.",
+          "required": true
+        },
+        {
+          "name": "goal",
+          "type": "number",
+          "default": null,
+          "description": "The goal, in minor units.",
+          "required": true
+        },
+        {
+          "name": "raised",
+          "type": "number",
+          "default": null,
+          "description": "The amount raised, in **minor units** (cents).",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title: the period, the unit, the source.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+          "required": false
+        },
+        {
+          "name": "hideTitle",
+          "type": "boolean",
+          "default": null,
+          "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the figure.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<GoalLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "The data is on its way: a skeleton of the chart, announced once.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "default": null,
+          "description": "Inline style on the figure (layout only: colours come from the tokens).",
+          "required": false
+        },
+        {
+          "name": "summary",
+          "type": "\"hidden\" | \"visible\"",
+          "default": null,
+          "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+          "required": false
+        },
+        {
+          "name": "summaryText",
+          "type": "string",
+          "default": null,
+          "description": "Your own summary instead of the generated one (still read first by screen readers).",
+          "required": false
+        },
+        {
+          "name": "supporters",
+          "type": "number",
+          "default": null,
+          "description": "How many people chipped in.",
+          "required": false
+        },
+        {
+          "name": "timeLeft",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The time left, written by the app (a `Countdown`, “2 days”).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/heatmap.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "When something happens: uploads by weekday and hour, errors by service and day.",
     "A matrix of two categorical dimensions with a value in each cell."