@automattic/charts 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.2.0] - 2024-12-31
+### Added
+- Charts: adds grid component to charts [#40683]
+
+### Fixed
+- Fixing incorrect TS build. [#40761]
+
 ## 0.1.0 - 2024-12-20
 ### Added
 - Adding a theme provider to Automattic Charts [#40558]
@@ -25,3 +32,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
+
+[0.2.0]: https://github.com/Automattic/charts/compare/v0.1.0...v0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -20,33 +20,41 @@
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"compile-ts": "tsc --pretty",
 		"build": "pnpm run clean-build && pnpm run compile-ts",
-		"clean-build": "rm -rf build/"
+		"build:prod": "tsup src/index.ts --minify --dts",
+		"clean-build": "rm -rf dist/"
 	},
 	"dependencies": {
 		"@react-spring/web": "9.7.3",
-		"@visx/responsive": "3.12.0",
 		"@visx/axis": "^3.12.0",
+		"@visx/event": "^3.8.0",
+		"@visx/grid": "^3.12.0",
 		"@visx/group": "^3.12.0",
 		"@visx/legend": "^3.12.0",
+		"@visx/responsive": "3.12.0",
 		"@visx/scale": "^3.12.0",
 		"@visx/shape": "^3.12.0",
 		"@visx/text": "3.12.0",
-		"@visx/xychart": "3.12.0",
-		"clsx": "2.1.1",
 		"@visx/tooltip": "^3.8.0",
-		"@visx/event": "^3.8.0"
+		"@visx/xychart": "3.12.0",
+		"clsx": "2.1.1"
 	},
 	"devDependencies": {
 		"@storybook/blocks": "8.4.6",
 		"@storybook/react": "8.4.6",
 		"@types/react": "18.3.13",
 		"@types/react-dom": "18.3.1",
+		"esbuild": "0.24.2",
+		"esbuild-sass-plugin": "3.3.1",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-extended": "4.0.2",
+		"postcss": "8.4.47",
+		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"sass-embedded": "1.83.0",
 		"storybook": "8.4.6",
+		"tsup": "8.3.5",
 		"typescript": "5.7.2"
 	},
 	"peerDependencies": {
@@ -54,10 +62,11 @@
 		"react-dom": "^17.0.0 || ^18.0.0"
 	},
 	"exports": {
-		".": "./src/index.ts",
-		"./state": "./src/state",
-		"./action-types": "./src/state/action-types",
-		"./bar": "./src/components/bar-chart/index.ts",
-		"./tooltip": "./src/components/tooltip/index.ts"
-	}
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		}
+	},
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts"
 }

package/src/components/bar-chart/bar-chart.tsx

@@ -7,6 +7,7 @@ import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
 import { FC, useCallback, type MouseEvent } from 'react';
 import { useChartTheme } from '../../providers/theme';
+import { GridControl } from '../grid-control';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './bar-chart.module.scss';
@@ -25,6 +26,7 @@ const BarChart: FC< BarChartProps > = ( {
 	showLegend = false,
 	legendOrientation = 'horizontal',
 	className,
+	gridVisibility = 'x',
 } ) => {
 	const theme = useChartTheme();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
@@ -97,6 +99,13 @@ const BarChart: FC< BarChartProps > = ( {
 		<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>
 			<svg width={ width } height={ height }>
 				<Group left={ margins.left } top={ margins.top }>
+					<GridControl
+						width={ xMax }
+						height={ yMax }
+						xScale={ xScale }
+						yScale={ yScale }
+						gridVisibility={ gridVisibility }
+					/>
 					{ data.map( ( series, seriesIndex ) => (
 						<Group key={ seriesIndex }>
 							{ series.data.map( d => {

package/src/components/grid-control/grid-control.module.scss

@@ -0,0 +1,10 @@
+// Variables
+$grid-line-color: #d7d6d6;
+
+.grid-control {
+  :global(.visx-line) {
+    stroke: $grid-line-color;
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+} 

package/src/components/grid-control/grid-control.tsx

@@ -0,0 +1,22 @@
+import { GridRows, GridColumns } from '@visx/grid';
+import React from 'react';
+import styles from './grid-control.module.scss';
+import type { GridProps } from '../shared/types';
+
+const GridControl: React.FC< GridProps > = ( {
+	width,
+	height,
+	xScale,
+	yScale,
+	gridVisibility = 'x',
+	top = 0,
+} ) => {
+	return (
+		<g transform={ `translate(0, ${ top })` } className={ styles[ 'grid-control' ] }>
+			{ gridVisibility.includes( 'x' ) && <GridRows scale={ xScale } width={ width } /> }
+			{ gridVisibility.includes( 'y' ) && <GridColumns scale={ yScale } height={ height } /> }
+		</g>
+	);
+};
+
+export default GridControl;

package/src/components/grid-control/index.ts

@@ -0,0 +1 @@
+export { default as GridControl } from './grid-control';

package/src/components/shared/types.d.ts

@@ -106,4 +106,42 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 	 * Legend orientation
 	 */
 	legendOrientation?: 'horizontal' | 'vertical';
+	/**
+	 * Grid visibility. x is default.
+	 */
+	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
+};
+
+/**
+ * Properties for grid components
+ */
+export type GridProps = {
+	/**
+	 * Width of the grid in pixels
+	 */
+	width: number;
+	/**
+	 * Height of the grid in pixels
+	 */
+	height: number;
+	/**
+	 * Grid visibility. x is default.
+	 */
+	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
+	/**
+	 * X-axis scale for the grid
+	 * TODO: Fix any type after resolving visx scale type issues
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	xScale: any;
+	/**
+	 * Y-axis scale for the grid
+	 * TODO: Fix any type after resolving visx scale type issues
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	yScale: any;
+	/**
+	 * Top offset for the grid
+	 */
+	top?: number;
 };

package/tsup.config.js

@@ -0,0 +1,26 @@
+import path from 'path';
+import { sassPlugin, postcssModules } from 'esbuild-sass-plugin';
+import { defineConfig } from 'tsup';
+
+export default defineConfig( {
+	entry: [ 'src/index.ts' ],
+	format: [ 'cjs', 'esm' ],
+	dts: true,
+	splitting: false,
+	sourcemap: true,
+	clean: true,
+	external: [ 'react' ],
+	outDir: 'dist',
+	esbuildPlugins: [
+		sassPlugin( {
+			filter: /\.module\.scss$/,
+			transform: postcssModules( {
+				basedir: path.resolve( __dirname ),
+				generateScopedName: '[name]__[local]___[hash:base64:5]',
+			} ),
+		} ),
+		sassPlugin( {
+			filter: /\.scss$/,
+		} ),
+	],
+} );