@neo4j-ndl/react-charts 1.4.2 → 2.0.0-alpha.0.3d763f7

package/skills/ndl-react-charts/components/charts.md

@@ -15,7 +15,7 @@ Import: `import { Chart } from '@neo4j-ndl/react-charts'`
 | `dataZoom` | `DataZoomComponentOption \| DataZoomComponentOption[]` |  |  | Data zoom configuration for the chart. |
 | `isChartZoomDisabled` | `boolean` |  |  | Whether the zoom in the chart is disabled |
 | `isLoading` | `boolean` |  |  | Whether the chart is in a loading state. |
-| `legend` | `{ show?: boolean; wrappingType?: "wrapping" \| "truncation" \| "overflow"; } \| undefined` |  |  | Legend configuration for the chart. `wrappingType` is deprecated and no longer has any effect since wrapping is now automatic, will be removed in v 5 |
+| `legend` | `{ isVisible?: boolean; }` |  |  | Legend configuration for the chart. |
 | `option` | `Omit<EChartsOption, "legend" \| "dataset" \| "series" \| "xAxis" \| "yAxis">` |  |  | Additional ECharts options to merge with the chart configuration. |
 | `palette` | `` `#${string}`[] `` |  |  | Custom color palette that overrides the default categorical colors. |
 | `series` | `NeedleSeries` | ✅ |  | The series configuration for the chart. Defines what data to display and how to display it. |
@@ -73,7 +73,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -218,9 +218,7 @@ const Component = () => {
       }}
     >
       <Chart
-        legend={{
-          show: true,
-        }}
+        legend={{ isVisible: true }}
         dataset={[
           {
             source: [
@@ -353,7 +351,7 @@ const Component = () => {
           nameLocation: 'middle',
           type: 'value',
         }}
-        legend={{ show: true }}
+        legend={{ isVisible: true }}
       />
     </div>
   );
@@ -382,9 +380,7 @@ const Component = () => {
       }}
     >
       <Chart
-        legend={{
-          show: true,
-        }}
+        legend={{ isVisible: true }}
         dataset={{
           dimensions: ['day', 'First', 'Second', 'Third'],
           source: [
@@ -463,9 +459,7 @@ const Component = () => {
             ],
           },
         ]}
-        legend={{
-          show: true,
-        }}
+        legend={{ isVisible: true }}
         yAxis={{
           data: ['Friday', 'Saturday', 'Sunday'],
           splitLine: { show: true },
@@ -523,7 +517,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={{
           source: [
@@ -579,7 +573,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={{
           source: [
@@ -641,7 +635,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={{
           dimensions: ['Country', 'Sales'],
@@ -702,7 +696,7 @@ const Component = () => {
       <Chart
         palette={['#E63946', '#457B9D', '#2A9D8F', '#E9C46A', '#F4A261']}
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -822,7 +816,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -921,7 +915,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -1103,7 +1097,7 @@ const Component = () => {
         yAxis={chartData.yAxis}
         series={chartData.series}
         legend={{
-          show: true,
+          isVisible: true,
         }}
       />
     </div>
@@ -1134,7 +1128,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         isLoading
         dataset={[
@@ -1281,7 +1275,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -1515,7 +1509,7 @@ const Component = () => {
       },
     ],
     legend: {
-      show: true,
+      isVisible: true,
     },
     option: {
       tooltip: {
@@ -1564,7 +1558,7 @@ const Component = () => {
 
   return (
     <>
-      <div className="n-flex n-flex-row n-gap-4 n-mb-4">
+      <div className="flex flex-row gap-4 mb-4">
         {yDimensions.map((yDimension) => (
           <Checkbox
             key={yDimension}
@@ -1617,7 +1611,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -1747,7 +1741,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         option={{
           tooltip: {
@@ -2153,7 +2147,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -2302,7 +2296,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={{
           dimensions: ['language', 'Repositories'],
@@ -2406,7 +2400,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {
@@ -2482,7 +2476,7 @@ const Component = () => {
     >
       <Chart
         legend={{
-          show: true,
+          isVisible: true,
         }}
         dataset={[
           {

package/skills/ndl-react-charts/references/styling.md

@@ -16,28 +16,34 @@ file uses.
 
 ### What the prebuilt stylesheet contains
 
-Besides the `ndl-*` component classes and the CSS custom properties, the
-prebuilt stylesheet ships only two groups of `n-` classes:
-
-- **Typography** — `n-display`, `n-title-1` … `n-title-4`,
-  `n-subheading-large/medium/small`, `n-body-large/medium/small`, `n-label`,
-  `n-code`.
-- **Semantic colors** — `n-text-*`, `n-bg-*`, `n-border-*` for the color
-  families below, plus `hover:` variants (and `active:` for `n-bg-*`). These
-  are safelisted in the Tailwind preset.
+Besides the component-internal `ndl-*` classes and the CSS custom properties,
+the prebuilt stylesheet ships only two groups of classes meant for consumers:
+
+- **Typography** — `ndl-typography-display`, `ndl-typography-title-1` …
+  `ndl-typography-title-4`, `ndl-typography-subheading-large/medium/small`,
+  `ndl-typography-body-large/medium/small`, `ndl-typography-label`,
+  `ndl-typography-code` (the legacy `n-body-medium`-style names still work as
+  aliases).
+- **Semantic colors** — `text-*`, `bg-*`, `border-*` for the color families
+  below, plus `hover:` variants (and `active:` for `bg-*`). These are
+  safelisted in the Tailwind preset.
+
+Only `ndl-typography-*` and `ndl-theme-light`/`ndl-theme-dark` are public
+`ndl-*` classes; every other `ndl-*` class belongs to a component and must not
+be styled against.
 
 **No other Tailwind utility is guaranteed to be in the prebuilt stylesheet.**
 A utility only ships if Needle's component source uses it, and component
 source no longer uses Tailwind utilities. Layout, spacing, sizing, radius and
-shadow utilities (`n-flex`, `n-items-center`, `n-gap-token-8`, `n-p-4`,
-`n-w-full`, `n-rounded-lg`, …) are absent and silently render nothing unless
-the consuming app runs its own Tailwind build with the Needle preset.
+shadow utilities (`flex`, `items-center`, `gap-token-8`, `p-4`, `w-full`,
+`rounded-lg`, …) are absent and silently render nothing unless the consuming
+app runs its own Tailwind build with the Needle preset.
 
 ### Quick verification
 
 ```sh
 CSS=node_modules/@neo4j-ndl/base/lib/neo4j-ds-styles.css
-grep -qE '\.n-body-medium\b' "$CSS" && echo "exists" || echo "MISSING"
+grep -qE '\.ndl-typography-body-medium\b' "$CSS" && echo "exists" || echo "MISSING"
 grep -qE -- '--space-8:' "$CSS" && echo "exists" || echo "MISSING"
 ```
 
@@ -125,7 +131,7 @@ props over raw utility classes for layout. Without an app Tailwind build they
 are the only reliable option; for anything they don't cover, use an inline
 `style` with a token, e.g. `style={{ margin: 'var(--space-8)' }}`.
 
-## Tailwind builds and the `n-` prefix
+## Tailwind builds and the class prefix
 
 Whether a utility class works depends on the consuming app:
 
@@ -133,9 +139,10 @@ Whether a utility class works depends on the consuming app:
   the [typography and color classes](#what-the-prebuilt-stylesheet-contains)
   exist.
 - **Tailwind build with the Needle preset** — any standard utility is generated
-  on demand. The preset sets `prefix: 'n-'`, so `n-flex`, `n-gap-4` and
-  `n-bg-primary-bg-weak` work. If the app sets its own `prefix` (including
-  `prefix: ''`), the app's config wins.
+  on demand. Since `@neo4j-ndl/base` v5 the preset sets no prefix, so `flex`,
+  `gap-4` and `bg-primary-bg-weak` work. If the app sets its own `prefix`
+  (apps on base v4 got `n-` by default), the app's config wins and every
+  utility carries that prefix (`n-flex`).
 
 Check the app's `tailwind.config` — whether it exists, and its `prefix` —
 before writing any utility class.
@@ -163,10 +170,10 @@ order. Each level is more error-prone than the one before it:
    `size="small"`, `ariaLabel`.
 
 2. **`className`** — for utility classes the component doesn't cover (e.g.
-   `n-text-neutral-text-weak` or `n-body-small`). Verify every class against
-   `node_modules/@neo4j-ndl/base/lib/neo4j-ds-styles.css`, or against the app's
-   own Tailwind build. Layout utilities such as `n-flex` work only with an app
-   Tailwind build. A wrong class compiles and silently renders nothing.
+   `text-neutral-text-weak` or `ndl-typography-body-small`). Verify every class
+   against `node_modules/@neo4j-ndl/base/lib/neo4j-ds-styles.css`, or against
+   the app's own Tailwind build. Layout utilities such as `flex` work only with
+   an app Tailwind build. A wrong class compiles and silently renders nothing.
 
 3. **`htmlAttributes`** — escape hatch for native HTML attributes, `aria-*`, and
    `data-*` the component doesn't expose as props (e.g. `id` for