@automattic/charts 0.57.0 → 0.59.0

package/dist/charts/sparkline/index.d.cts

@@ -1,113 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as ResponsiveConfig } from '../../with-responsive-CNfhzAUu.cjs';
-import * as react from 'react';
-
-type SparklineDataPoint = number;
-type GradientConfig = {
-    /**
-     * Start color for gradient (defaults to color prop)
-     */
-    from?: string;
-    /**
-     * End color for gradient (defaults to theme backgroundColor)
-     */
-    to?: string;
-    /**
-     * Start opacity (0-1)
-     * @default 0.5
-     */
-    fromOpacity?: number;
-    /**
-     * End opacity (0-1)
-     * @default 0.0
-     */
-    toOpacity?: number;
-};
-interface SparklineProps {
-    /**
-     * Array of numeric values to plot
-     * @example [10, 25, 15, 30, 22, 35]
-     */
-    data: SparklineDataPoint[];
-    /**
-     * Width of the sparkline in pixels
-     * @default 100
-     */
-    width?: number;
-    /**
-     * Height of the sparkline in pixels
-     * @default 40
-     */
-    height?: number;
-    /**
-     * Size (used by responsive variant, equivalent to width for square charts)
-     */
-    size?: number;
-    /**
-     * Color for the line stroke (hex or CSS color)
-     * @default Theme color (first color in theme.colors array)
-     */
-    color?: string;
-    /**
-     * Line stroke width in pixels
-     * @default 1
-     */
-    strokeWidth?: number;
-    /**
-     * Whether to render the gradient fill beneath the line
-     * @default true
-     */
-    withGradientFill?: boolean;
-    /**
-     * Gradient configuration for area fill
-     * If not provided, uses color prop with default opacity values
-     */
-    gradient?: GradientConfig;
-    /**
-     * Additional CSS class name
-     */
-    className?: string;
-    /**
-     * Chart ID for unique gradient/element identification
-     */
-    chartId?: string;
-    /**
-     * Margin around the chart
-     * @default { top: 2, right: 2, bottom: 2, left: 2 }
-     */
-    margin?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-    /**
-     * Enable entry animation on initial render
-     * Creates a rising effect where the line scales up from the bottom.
-     * Automatically respects user's prefers-reduced-motion system setting.
-     * @default false
-     */
-    animation?: boolean;
-}
-
-/**
- * Sparkline - A minimal line chart for inline data visualization.
- *
- * Sparklines are compact charts designed to be embedded inline with text or
- * displayed in small spaces like table cells or dashboards. They show trends
- * without axes, labels, or other chart chrome.
- *
- * This component is built on top of LineChart with preconfigured settings
- * for minimal display (no axes, grid, tooltips, or legend).
- */
-declare const SparklineUnresponsive: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * Responsive Sparkline chart component
- */
-declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<SparklineProps, "width" | "height" | "size"> & {
-    width?: number;
-    height?: number;
-    size?: number;
-} & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
-
-export { type GradientConfig, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive };

package/dist/charts/sparkline/index.d.ts

@@ -1,113 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as ResponsiveConfig } from '../../with-responsive-CNfhzAUu.js';
-import * as react from 'react';
-
-type SparklineDataPoint = number;
-type GradientConfig = {
-    /**
-     * Start color for gradient (defaults to color prop)
-     */
-    from?: string;
-    /**
-     * End color for gradient (defaults to theme backgroundColor)
-     */
-    to?: string;
-    /**
-     * Start opacity (0-1)
-     * @default 0.5
-     */
-    fromOpacity?: number;
-    /**
-     * End opacity (0-1)
-     * @default 0.0
-     */
-    toOpacity?: number;
-};
-interface SparklineProps {
-    /**
-     * Array of numeric values to plot
-     * @example [10, 25, 15, 30, 22, 35]
-     */
-    data: SparklineDataPoint[];
-    /**
-     * Width of the sparkline in pixels
-     * @default 100
-     */
-    width?: number;
-    /**
-     * Height of the sparkline in pixels
-     * @default 40
-     */
-    height?: number;
-    /**
-     * Size (used by responsive variant, equivalent to width for square charts)
-     */
-    size?: number;
-    /**
-     * Color for the line stroke (hex or CSS color)
-     * @default Theme color (first color in theme.colors array)
-     */
-    color?: string;
-    /**
-     * Line stroke width in pixels
-     * @default 1
-     */
-    strokeWidth?: number;
-    /**
-     * Whether to render the gradient fill beneath the line
-     * @default true
-     */
-    withGradientFill?: boolean;
-    /**
-     * Gradient configuration for area fill
-     * If not provided, uses color prop with default opacity values
-     */
-    gradient?: GradientConfig;
-    /**
-     * Additional CSS class name
-     */
-    className?: string;
-    /**
-     * Chart ID for unique gradient/element identification
-     */
-    chartId?: string;
-    /**
-     * Margin around the chart
-     * @default { top: 2, right: 2, bottom: 2, left: 2 }
-     */
-    margin?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-    /**
-     * Enable entry animation on initial render
-     * Creates a rising effect where the line scales up from the bottom.
-     * Automatically respects user's prefers-reduced-motion system setting.
-     * @default false
-     */
-    animation?: boolean;
-}
-
-/**
- * Sparkline - A minimal line chart for inline data visualization.
- *
- * Sparklines are compact charts designed to be embedded inline with text or
- * displayed in small spaces like table cells or dashboards. They show trends
- * without axes, labels, or other chart chrome.
- *
- * This component is built on top of LineChart with preconfigured settings
- * for minimal display (no axes, grid, tooltips, or legend).
- */
-declare const SparklineUnresponsive: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * Responsive Sparkline chart component
- */
-declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<SparklineProps, "width" | "height" | "size"> & {
-    width?: number;
-    height?: number;
-    size?: number;
-} & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
-
-export { type GradientConfig, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive };

package/dist/charts/sparkline/index.js

@@ -1,16 +0,0 @@
-import {
-  Sparkline,
-  SparklineUnresponsive
-} from "../../chunk-PXLEMUGJ.js";
-import "../../chunk-WLODYNLB.js";
-import "../../chunk-BPYKWMI7.js";
-import "../../chunk-Z26M4V2M.js";
-import "../../chunk-OP6PHB2U.js";
-import "../../chunk-32DH6JDF.js";
-import "../../chunk-DAU3HNEG.js";
-import "../../chunk-G3PMV62Z.js";
-export {
-  Sparkline,
-  SparklineUnresponsive
-};
-//# sourceMappingURL=index.js.map

package/dist/charts/sparkline/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-2A34OA5O.cjs

@@ -1,51 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
-var _jsxruntime = require('react/jsx-runtime');
-function RadialWipeAnimation({
-  id,
-  radius,
-  innerRadius = 0,
-  durationMs = 1e3,
-  wipePercentage = 100,
-  direction = "clockwise",
-  startAngle = "-90deg"
-}) {
-  const strokeWidth = (radius - innerRadius) * 2 + // The stroke is centered on the circumference, so we need to double the width.
-  1;
-  const scaleY = direction === "clockwise" ? -1 : 1;
-  const isValidWipePercentage = 0 < wipePercentage && wipePercentage <= 100;
-  const animationDuration = `${// If wipePercentage is invalid, set animation duration to 0 to disable animation.
-  isValidWipePercentage ? durationMs * (100 / wipePercentage) : 0}ms`;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", {
-    id,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", {
-      cx: 0,
-      cy: 0,
-      r: radius,
-      pathLength: "100",
-      fill: "white",
-      stroke: "black",
-      strokeWidth,
-      strokeDasharray: "100, 1000",
-      strokeDashoffset: "0",
-      style: {
-        transform: `rotate(${startAngle}) scaleY(${scaleY})`
-      },
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "animate", {
-        attributeName: "stroke-dashoffset",
-        from: "0",
-        to: "100.1",
-        dur: animationDuration,
-        fill: "freeze",
-        calcMode: "spline",
-        keySplines: "0.42 0 0.58 1;0 0 1 1",
-        keyTimes: `0;${wipePercentage / 100};1`
-      })
-    })
-  });
-}
-var radial_wipe_animation_default = RadialWipeAnimation;
-
-
-
-exports.radial_wipe_animation_default = radial_wipe_animation_default;
-//# sourceMappingURL=chunk-2A34OA5O.cjs.map

package/dist/chunk-2A34OA5O.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2A34OA5O.cjs","../src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx"],"names":[],"mappings":"AAAA;ACAA,+CAA4B;AAiC5B,SAAS,mBAAA,CAAoB;AAAA,EAC3B,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAc,CAAA;AAAA,EACd,WAAA,EAAa,GAAA;AAAA,EACb,eAAA,EAAiB,GAAA;AAAA,EACjB,UAAA,EAAY,WAAA;AAAA,EACZ,WAAA,EAAa;AACf,CAAA,EAAG;AACD,EAAA,MAAM,YAAA,EAAA,CAAe,OAAA,EAAS,WAAA,EAAA,EAAe,EAAA;AAAA,EAE7C,CAAA;AAEA,EAAA,MAAM,OAAA,EAAS,UAAA,IAAc,YAAA,EAAc,CAAA,EAAA,EAAK,CAAA;AAChD,EAAA,MAAM,sBAAA,EAAwB,EAAA,EAAI,eAAA,GAAkB,eAAA,GAAkB,GAAA;AACtE,EAAA,MAAM,kBAAA,EAAoB,CAAA;AAAA,EAAA;AAG1B,EAAA;AAAiC,IAAA;AAC/B,IAAA;AACsC,MAAA;AAChC,MAAA;AACA,MAAA;AACD,MAAA;AACS,MAAA;AACN,MAAA;AACE,MAAA;AAER,MAAA;AACiB,MAAA;AACC,MAAA;AACX,QAAA;AAC4C,MAAA;AACnD,MAAA;AACuC,QAAA;AACtB,QAAA;AACT,QAAA;AACF,QAAA;AACC,QAAA;AACC,QAAA;AAEI,QAAA;AAEE,QAAA;AAEuB,MAAA;AACpC,IAAA;AACF,EAAA;AAEL;AACA;ADrCA;AACA;AACA;AACA","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2A34OA5O.cjs","sourcesContent":[null,"import { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * This animation uses the SVG self-drawing technique (source: https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/),\n * leveraging stroke-dasharray and stroke-dashoffset properties to create the effect.\n *\n * Here, we reverse the animation to \"un-draw\" the circle for the revealing / radial wipe effect:\n * - Initially, the entire circle is drawn with a white mask.\n * - The circle's border (stroke) is drawn with a black stroke, wide enough to cover the circle.\n * - The stroke is then \"un-drawn,\" creating the wipe animation.\n * - A white mask makes the area visible, while a black mask makes the area invisible.\n */\n\n/**\n * RadialWipeAnimationProps - SVG mask props that requires a radial wipe animation effect.\n *\n * @param {object}                            props                         - The properties object.\n * @param {string}                            props.id                      - The unique ID for the mask.\n * @param {number}                            props.radius                  - The outer radius of the radial wipe.\n * @param {number}                            [props.innerRadius=0]         - The inner radius of the radial wipe.\n * @param {number}                            [props.durationMs=1000]       - The duration of the animation in milliseconds.\n * @param {number}                            [props.wipePercentage=100]    - The percentage of the wipe animation to complete.\n * @param {'clockwise' | 'counter-clockwise'} [props.direction='clockwise'] - The direction of the wipe animation.\n * @param {Angle}                             [props.startAngle='-90deg']   - The starting angle of the wipe animation.\n *\n * @return {JSX.Element} The radial wipe mask element.\n */\n\n/**\n * Renders a SVG mask that creates a radial wipe animation effect.\n *\n * @param {RadialWipeAnimationProps} props - Component props\n * @return {JSX.Element} The rendered mask component\n */\nfunction RadialWipeAnimation({\n  id,\n  radius,\n  innerRadius = 0,\n  durationMs = 1000,\n  wipePercentage = 100,\n  direction = 'clockwise',\n  startAngle = '-90deg'\n}) {\n  const strokeWidth = (radius - innerRadius) * 2 +\n  // The stroke is centered on the circumference, so we need to double the width.\n  1; // Added 1 to prevent sub-pixel rendering issues.\n\n  const scaleY = direction === 'clockwise' ? -1 : 1;\n  const isValidWipePercentage = 0 < wipePercentage && wipePercentage <= 100;\n  const animationDuration = `${\n  // If wipePercentage is invalid, set animation duration to 0 to disable animation.\n  isValidWipePercentage ? durationMs * (100 / wipePercentage) : 0}ms`;\n  return /*#__PURE__*/_jsx(\"mask\", {\n    id: id,\n    children: /*#__PURE__*/_jsx(\"circle\", {\n      cx: 0,\n      cy: 0,\n      r: radius,\n      pathLength: \"100\",\n      fill: \"white\",\n      stroke: \"black\" // The stroke will be un-drawn, hence 'black' mask.\n      ,\n      strokeWidth: strokeWidth,\n      strokeDasharray: \"100, 1000\",\n      strokeDashoffset: \"0\",\n      style: {\n        transform: `rotate(${startAngle}) scaleY(${scaleY})`\n      },\n      children: /*#__PURE__*/_jsx(\"animate\", {\n        attributeName: \"stroke-dashoffset\",\n        from: \"0\",\n        to: \"100.1\",\n        dur: animationDuration,\n        fill: \"freeze\" // Same as CSS 'forwards' to retain the final state after animation.\n        ,\n        calcMode: \"spline\" // custom easing\n        ,\n        keySplines: \"0.42 0 0.58 1;0 0 1 1\" // ease-in-out ; linear (unimportant)\n        ,\n        keyTimes: `0;${wipePercentage / 100};1`\n      })\n    })\n  });\n}\nexport default RadialWipeAnimation;"]}