@automattic/charts 0.32.0 → 0.34.0

package/CHANGELOG.md

@@ -5,18 +5,37 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.34.0] - 2025-09-08
+### Changed
+- Leaderboard Chart: Extend BaseChartProps [#45100]
+
+### Fixed
+- Fix SASS and CSS Modules processing. [#45098]
+
+## [0.33.0] - 2025-09-08
+### Added
+- Add ability to control percentage vs. value display. [#45052]
+
+### Changed
+- Leaderboard Chart: Use GlobalContextProvider theme for colors. [#45067]
+- Update package dependencies. [#45027] [#45097]
+- Use `tsup` for builds. [#45051]
+
+### Fixed
+- Allow type-checking of tests and stories. [#45082]
+
 ## [0.32.0] - 2025-09-02
 ### Added
-- Charts: adds controls for label visibility [#45040]
+- Add controls for label visibility. [#45040]
 
 ### Changed
-- Charts: format percentage values to be prettier [#45032]
-- Charts: Use a global context provider for theme configuration in all stories [#45028]
-- Charts: use getStringWidth for label size calculations [#45030]
-- Fix the conversion-funnel-chart component exportation [#45033]
+- Fix the conversion-funnel-chart component export. [#45033]
+- Format percentage values to be prettier. [#45032]
+- Use a global context provider for theme configuration in all stories. [#45028]
+- Use `getStringWidth` for label size calculations. [#45030]
 
 ### Fixed
-- All charts were affected due to z-index. [#45043]
+- Prevent z-index issue across all charts. [#45043]
 
 ## [0.31.0] - 2025-09-01
 ### Added
@@ -418,6 +437,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.34.0]: https://github.com/Automattic/charts/compare/v0.33.0...v0.34.0
+[0.33.0]: https://github.com/Automattic/charts/compare/v0.32.0...v0.33.0
 [0.32.0]: https://github.com/Automattic/charts/compare/v0.31.0...v0.32.0
 [0.31.0]: https://github.com/Automattic/charts/compare/v0.30.0...v0.31.0
 [0.30.0]: https://github.com/Automattic/charts/compare/v0.29.0...v0.30.0

package/README.md

@@ -16,22 +16,106 @@ pnpm add @automattic/charts
 yarn add @automattic/charts
 ```
 
-### Local development with Storybook
+### Importing Components
 
-To run Storybook locally, from the root of the monorepo follow these steps:
+You can import charts from the package in several ways depending on your needs:
 
-1. Run `pnpm install` to install the dependencies.
-2. Run `cd projects/js-packages/charts` to navigate to the charts package.
-3. Run `pnpm run storybook` to start the storybook server.
+#### Option 1: Import everything from the main entry (includes all styles)
 
-## Contributing
+```javascript
+import { LineChart, BarChart, PieChart } from '@automattic/charts';
+import '@automattic/charts/style.css'; // Import all styles
+```
 
-Ready to contribute? Check out the [Jetpack contributing guide](https://github.com/Automattic/jetpack/blob/trunk/docs/CONTRIBUTING.md) and the [Charts AI documentation guide](https://github.com/Automattic/jetpack/blob/trunk/projects/js-packages/charts/docs/ai-documentation-guide.md) for detailed information on adding new features and documentation.
+#### Option 2: Import individual components (tree-shaking friendly)
+
+For better bundle optimization, you can import components individually:
+
+```javascript
+// Import individual components
+import { LineChart } from '@automattic/charts/line-chart';
+import { BarChart } from '@automattic/charts/bar-chart';
+import { PieChart } from '@automattic/charts/pie-chart';
+
+// Import individual component styles
+import '@automattic/charts/line-chart/style.css';
+import '@automattic/charts/bar-chart/style.css';
+import '@automattic/charts/pie-chart/style.css';
+```
+
+Individual entry exports also provide easier access to chart-specific types and helpers when available. This makes it simpler to find and leverage TypeScript types, utility functions, and other chart-specific tools that are exported alongside the main component.
+
+#### Available Components and Entry Points
+
+The following components can be imported individually:
+
+- `@automattic/charts/bar-chart` - Bar Chart component
+- `@automattic/charts/bar-list-chart` - Bar List Chart component
+- `@automattic/charts/conversion-funnel-chart` - Conversion Funnel Chart component
+- `@automattic/charts/leaderboard-chart` - Leaderboard Chart component
+- `@automattic/charts/legend` - Legend component
+- `@automattic/charts/line-chart` - Line Chart component
+- `@automattic/charts/pie-chart` - Pie Chart component
+- `@automattic/charts/pie-semi-circle-chart` - Pie Semi-Circle Chart component
+- `@automattic/charts/tooltip` - Tooltip component
+- `@automattic/charts/hooks` - React hooks
+- `@automattic/charts/providers` - Context providers
+- `@automattic/charts/visx/group` - Visx group utilities
+- `@automattic/charts/visx/legend` - Visx legend utilities
+- `@automattic/charts/visx/text` - Visx text utilities
+
+#### Available Style Imports
+
+Each component has its own CSS file that can be imported individually:
+
+- `@automattic/charts/bar-chart/style.css`
+- `@automattic/charts/bar-list-chart/style.css`
+- `@automattic/charts/conversion-funnel-chart/style.css`
+- `@automattic/charts/leaderboard-chart/style.css`
+- `@automattic/charts/legend/style.css`
+- `@automattic/charts/line-chart/style.css`
+- `@automattic/charts/pie-chart/style.css`
+- `@automattic/charts/pie-semi-circle-chart/style.css`
+- `@automattic/charts/tooltip/style.css`
+
+### Basic Usage Example
+
+```javascript
+import React from 'react';
+import { LineChart } from '@automattic/charts';
+import '@automattic/charts/line-chart/style.css';
+
+const data = [
+	{ date: new Date( '2024-01-01' ), value: 10 },
+	{ date: new Date( '2024-01-02' ), value: 90 }, // Sharp rise
+	{ date: new Date( '2024-01-03' ), value: 85 }, // Slight decline
+	{ date: new Date( '2024-01-04' ), value: 82 }, // Gradual decline
+	{ date: new Date( '2024-01-05' ), value: 5 }, // Sharp drop
+	{ date: new Date( '2024-01-06' ), value: 8 }, // Slight rise
+	{ date: new Date( '2024-01-07' ), value: 10 }, // Gradual rise
+];
+
+function MyComponent() {
+	return <LineChart data={ data } width={ 400 } height={ 300 } />;
+}
+```
 
 ## Using this package in your WordPress plugin
 
 If you plan on using this package in your WordPress plugin, we would recommend that you use [Jetpack Autoloader](https://packagist.org/packages/automattic/jetpack-autoloader) as your autoloader. This will allow for maximum interoperability with other plugins that use this package as well.
 
+## Contributing
+
+Ready to contribute? Check out the [Jetpack contributing guide](https://github.com/Automattic/jetpack/blob/trunk/docs/CONTRIBUTING.md) and the [Charts AI documentation guide](https://github.com/Automattic/jetpack/blob/trunk/projects/js-packages/charts/docs/ai-documentation-guide.md) for detailed information on adding new features and documentation.
+
+### Local development with Storybook
+
+To run Storybook locally, from the root of the monorepo follow these steps:
+
+1. Run `pnpm install` to install the dependencies.
+2. Run `cd projects/js-packages/charts` to navigate to the charts package.
+3. Run `pnpm run storybook` to start the storybook server.
+
 ## Security
 
 Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic).

package/dist/{types/components/tooltip/base-tooltip.d.ts → base-tooltip-Dlq8KmQA.d.cts}

@@ -29,4 +29,4 @@ type CustomTooltip = {
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
 declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
 
-export { BaseTooltip, type BaseTooltipProps, type TooltipData };
+export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/base-tooltip-Dlq8KmQA.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ComponentType, ReactNode } from 'react';
+
+type TooltipData = {
+    label: string;
+    value: number;
+    valueDisplay?: string;
+};
+type TooltipComponentProps = {
+    data: TooltipData;
+    className?: string;
+};
+type TooltipCommonProps = {
+    top: number;
+    left: number;
+    style?: CSSProperties;
+    className?: string;
+};
+type DefaultDataTooltip = {
+    data: TooltipData;
+    component?: ComponentType<TooltipComponentProps>;
+    children?: never;
+};
+type CustomTooltip = {
+    children: ReactNode;
+    data?: never;
+    component?: never;
+};
+type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
+declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };