@wavv/ui 2.2.2-alpha.7 → 2.2.2-alpha.8

package/build/components/BarChart.d.ts

@@ -25,7 +25,7 @@ type Props = {
     /** The width of the Y axis */
     yAxisWidth?: number;
 } & ChartProps;
-declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const DiagonalAxisTick: ({ x, y, payload, maxXLabelLength, axisColor, }: {
     x: number;
     y: number;

package/build/components/BarChart.js

@@ -3,21 +3,25 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { formatNumber } from "../utils/formatNumber.js";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const { scale2 } = useTheme();
     const xAxisTick = diagonalXLabels ? (args)=>DiagonalAxisTick({
             ...args,
             maxXLabelLength,
             axisColor
         }) : {};
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(BarChart, {
                     margin: {
                         top: 0,

package/build/components/ChartHelpers.d.ts

@@ -1,4 +1,4 @@
-import { type LegendPayload, type TooltipContentProps } from 'recharts';
+import { type LegendPayload, type TooltipContentProps, type ResponsiveContainerProps } from 'recharts';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { Margin, MaxWidthHeight, WidthHeight } from './types';
 type ChartData = {
@@ -23,7 +23,11 @@ export type ChartProps = {
     axisColor?: string;
     /** The postfix to display after the legend value in the tooltip */
     tooltipLegendPostfix?: React.ReactNode;
-} & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+} & Pick<ResponsiveContainerProps, 'initialDimension'> & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+type InitialDimension = ResponsiveContainerProps['initialDimension'];
+type Width = WidthHeight['width'];
+type Height = WidthHeight['height'];
+export declare const getInitialDimension: (initialDimension: InitialDimension, width: Width, height: Height) => InitialDimension;
 export declare const ChartStyles: () => import("react/jsx-runtime").JSX.Element;
 export declare const ChartContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/build/components/ChartHelpers.js

@@ -5,6 +5,13 @@ import { Tooltip } from "recharts";
 import { numberWithCommas } from "../utils/index.js";
 import Dot from "./Dot.js";
 import { marginProps } from "./helpers/styledProps.js";
+const getInitialDimension = (initialDimension, width, height)=>{
+    if (initialDimension) return initialDimension;
+    if ('number' == typeof width && 'number' == typeof height) return {
+        width,
+        height
+    };
+};
 const ChartStyles = ()=>/*#__PURE__*/ jsx(Global, {
         styles: {
             '.recharts-cartesian-grid-vertical line:first-of-type': {
@@ -118,4 +125,4 @@ const TooltipLabel = styled.div(({ theme })=>({
         color: theme.tooltip.color.subtext,
         marginBottom: 4
     }));
-export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent };
+export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent, getInitialDimension };

package/build/components/LineChart.d.ts

@@ -2,5 +2,5 @@ import { type ChartProps } from './ChartHelpers';
 type Props = {
     enableLegendToggle?: boolean;
 } & ChartProps;
-declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

package/build/components/LineChart.js

@@ -3,8 +3,8 @@ import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { formatNumber } from "../utils/formatNumber.js";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const [lines, setLines] = useState(keys);
     const { scale2 } = useTheme();
     const handleLineToggle = (item)=>{
@@ -19,13 +19,17 @@ const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor
         setLines((prevLines)=>toggleLines(prevLines));
     };
     const toggleData = enableLegendToggle && keys.length > 1 ? handleLineToggle : void 0;
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(LineChart, {
                     margin: {
                         top: 8,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.2-alpha.7",
+	"version": "2.2.2-alpha.8",
 	"type": "module",
 	"exports": {
 		".": {