@redvars/peacock 3.3.3 → 3.5.0

package/dist/src/chart-donut/chart-donut.d.ts

@@ -1,53 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-export type ChartDonutColor = {
-    color: string;
-};
-export type ChartDonutItem = {
-    name: string;
-    value: number;
-    label?: string;
-    color?: string;
-};
-/**
- * @label Chart Donut
- * @tag wc-chart-donut
- * @rawTag chart-donut
- * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.
- * @tags charts
- *
- * @example
- * ```html
- * <wc-chart-donut width="400" label="Total"></wc-chart-donut>
- * <script>
- *   document.querySelector('wc-chart-donut').data = [
- *     { name: 'A', value: 30, label: 'Category A' },
- *     { name: 'B', value: 50, label: 'Category B' },
- *     { name: 'C', value: 20, label: 'Category C' },
- *   ];
- * </script>
- * ```
- */
-export declare class ChartDonut extends LitElement {
-    static styles: import("lit").CSSResultGroup[];
-    private svgElement?;
-    /** Width (and height) of the chart in pixels. */
-    width: number;
-    /** Margin around the chart. */
-    margin: number;
-    /** Whether to show labels outside the chart. */
-    showLabels: boolean;
-    /** Chart data array. Each item should have name, value, and optional label and color. */
-    data: ChartDonutItem[];
-    /** Label displayed in the center of the donut. */
-    label?: string;
-    private _initialized;
-    private _debouncedRenderChart;
-    firstUpdated(): void;
-    updated(changedProperties: PropertyValues): void;
-    private _getRadius;
-    private _getTotal;
-    private _getPieData;
-    private _getColorScale;
-    private _renderChart;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/chart-donut/index.d.ts

@@ -1 +0,0 @@
-export { ChartDonut } from './chart-donut.js';

package/dist/src/styleMixins.css.d.ts

@@ -1,9 +0,0 @@
-import { CSSResult } from 'lit';
-export declare const focusRing: (color?: string) => CSSResult;
-export declare const getTypography: (name: string) => CSSResult;
-export declare const getTypographyNotImportant: (name: string) => CSSResult;
-export declare const forPhoneOnly: (content: CSSResult) => CSSResult;
-export declare const forTabletPortraitUp: (content: CSSResult) => CSSResult;
-export declare const forTabletLandscapeUp: (content: CSSResult) => CSSResult;
-export declare const forDesktopUp: (content: CSSResult) => CSSResult;
-export declare const forBigDesktopUp: (content: CSSResult) => CSSResult;

package/dist/src/utils.d.ts

@@ -1,9 +0,0 @@
-export declare function createCacheFetch(name: string): Promise<(url: string) => Promise<string>>;
-export declare function sanitizeSvg(rawSvg: string): string;
-export declare function observerSlotChangesWithCallback(slot: HTMLSlotElement | null, callback: (hasContent: boolean) => void): void;
-export declare function throttle(func: Function, delay: number, options?: {
-    leading: boolean;
-    trailing: boolean;
-}): (...args: any[]) => void;
-export declare function isInViewport(element: HTMLElement): boolean;
-export declare function isDarkMode(): boolean;

package/src/chart-donut/chart-donut.scss

@@ -1,37 +0,0 @@
-@use '../../scss/mixin';
-
-@include mixin.base-styles;
-
-:host {
-  display: inline-block;
-}
-
-.title {
-  @include mixin.get-typography('title-large-emphasized');
-  fill: var(--color-on-surface);
-}
-
-.label {
-  @include mixin.get-typography('title-medium');
-  fill: var(--color-on-surface);
-}
-
-.arc {
-  cursor: pointer;
-  transition: filter 150ms ease;
-
-  &:hover {
-    filter: brightness(1.2);
-  }
-}
-
-.item-polyline {
-  fill: none;
-  stroke-width: 1;
-  stroke: var(--color-on-surface);
-}
-
-.item-label {
-  fill: var(--color-on-surface);
-  @include mixin.get-typography('label-medium');
-}

package/src/chart-donut/chart-donut.ts

@@ -1,287 +0,0 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
-import * as d3 from 'd3';
-import styles from './chart-donut.scss';
-
-export type ChartDonutColor = {
-  color: string;
-};
-
-export type ChartDonutItem = {
-  name: string;
-  value: number;
-  label?: string;
-  color?: string;
-};
-
-const chartColors: ChartDonutColor[] = [];
-['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
-  chartColors.push({
-    color: `var(--color-${colorName})`,
-  });
-});
-
-/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */
-interface ArcPathElement extends SVGPathElement {
-  _prevDatum?: d3.PieArcDatum<ChartDonutItem>;
-}
-
-function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
-  let timer: ReturnType<typeof setTimeout>;
-  return ((...args: any[]) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), wait);
-  }) as T;
-}
-
-/**
- * @label Chart Donut
- * @tag wc-chart-donut
- * @rawTag chart-donut
- * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.
- * @tags charts
- *
- * @example
- * ```html
- * <wc-chart-donut width="400" label="Total"></wc-chart-donut>
- * <script>
- *   document.querySelector('wc-chart-donut').data = [
- *     { name: 'A', value: 30, label: 'Category A' },
- *     { name: 'B', value: 50, label: 'Category B' },
- *     { name: 'C', value: 20, label: 'Category C' },
- *   ];
- * </script>
- * ```
- */
-@IndividualComponent
-export class ChartDonut extends LitElement {
-  static styles = [styles];
-
-  @query('svg')
-  private svgElement?: SVGElement;
-
-  /** Width (and height) of the chart in pixels. */
-  @property({ type: Number, reflect: true }) width: number = 0;
-
-  /** Margin around the chart. */
-  @property({ type: Number, reflect: true }) margin: number = 10;
-
-  /** Whether to show labels outside the chart. */
-  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })
-  showLabels: boolean = true;
-
-  /** Chart data array. Each item should have name, value, and optional label and color. */
-  @property({ type: Array }) data: ChartDonutItem[] = [];
-
-  /** Label displayed in the center of the donut. */
-  @property({ type: String }) label?: string;
-
-  private _initialized = false;
-
-  private _debouncedRenderChart = debounce(() => {
-    this._renderChart(true);
-  }, 300);
-
-  firstUpdated() {
-    this._renderChart(false);
-  }
-
-  updated(changedProperties: PropertyValues) {
-    if (!this._initialized) {
-      this._initialized = true;
-      return;
-    }
-    const watchedProps = ['width', 'margin', 'showLabels', 'data'];
-    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
-    if (hasChanged) {
-      this._debouncedRenderChart();
-    }
-  }
-
-  private _getRadius(): number {
-    return this.width / 2 - this.margin - 100;
-  }
-
-  private _getTotal(): number {
-    return this.data.reduce((total, d) => total + d.value, 0);
-  }
-
-  private _getPieData() {
-    const pie = d3
-      .pie<ChartDonutItem>()
-      .sort(null)
-      .value(d => d.value);
-    return pie(this.data);
-  }
-
-  private _getColorScale() {
-    return d3
-      .scaleOrdinal<string, ChartDonutColor>()
-      .domain(this.data.map(d => d.name))
-      .range(chartColors);
-  }
-
-  private _renderChart(animate: boolean) {
-    if (!this.svgElement) return;
-
-    const DURATION = 500;
-    const radius = this._getRadius();
-    const pieData = this._getPieData();
-    const colorScale = this._getColorScale();
-    const total = this._getTotal();
-
-    const svg = d3.select(this.svgElement);
-
-    const doughnutArc = d3
-      .arc<d3.PieArcDatum<ChartDonutItem>>()
-      .innerRadius(radius * 0.72)
-      .outerRadius(radius);
-
-    const labelsArc = d3
-      .arc<d3.PieArcDatum<ChartDonutItem>>()
-      .innerRadius(radius + 10)
-      .outerRadius(radius + 10);
-
-    // Update SVG dimensions and center transform
-    svg.attr('width', this.width).attr('height', this.width);
-    svg
-      .select('.chart-container')
-      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);
-
-    // Arc paths — keyed by name so D3 matches elements across updates
-    const $paths = svg
-      .select('.arc-container')
-      .selectAll<SVGPathElement, d3.PieArcDatum<ChartDonutItem>>('.arc')
-      .data(pieData, d => d.data.name)
-      .join('path')
-      .attr('class', 'arc')
-      .style('fill', d => d.data.color || colorScale(d.data.name).color);
-
-    if (animate) {
-      $paths
-        .transition()
-        .duration(DURATION)
-        .ease(d3.easeCubicInOut)
-        .attrTween('d', function (this: SVGPathElement, d) {
-          const self = this as ArcPathElement;
-          // Interpolate from the last rendered angles to the new ones.
-          // New (entering) arcs start collapsed at their startAngle.
-          const prev: { startAngle: number; endAngle: number } =
-            self._prevDatum ?? {
-              startAngle: d.startAngle,
-              endAngle: d.startAngle,
-            };
-          self._prevDatum = d;
-          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);
-          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);
-          return (t: number) =>
-            doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??
-            '';
-        });
-    } else {
-      // Initial render: draw immediately and seed previous-datum for later tweens
-      $paths
-        .each(function (this: SVGPathElement, d) {
-          (this as ArcPathElement)._prevDatum = d;
-        })
-        .attr('d', d => doughnutArc(d) ?? '');
-    }
-
-    // Animate the central total counter
-    const $title = svg.select('.title');
-    if (animate) {
-      $title
-        .transition()
-        .duration(DURATION)
-        .ease(d3.easeCubicInOut)
-        .tween('text', function (this: d3.BaseType) {
-          const sel = d3.select(this as SVGTextElement);
-          const start = parseFloat(sel.text()) || 0;
-          const interp = d3.interpolateNumber(start, total);
-          return function (t: number) {
-            sel.text(Math.round(interp(t)));
-          };
-        });
-    } else {
-      $title.text(total);
-    }
-
-    // Label polylines and text
-    const $chartContainer = svg.select('.chart-container');
-
-    if (this.showLabels) {
-      const pointsFn = (d: d3.PieArcDatum<ChartDonutItem>) => {
-        const posA = doughnutArc.centroid(d);
-        const posB = labelsArc.centroid(d);
-        const posC = posB.slice() as [number, number];
-        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
-        return [posA, posB, posC].map(p => p.join(',')).join(' ');
-      };
-
-      const transformFn = (d: d3.PieArcDatum<ChartDonutItem>) => {
-        const pos = labelsArc.centroid(d);
-        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
-        return `translate(${pos})`;
-      };
-
-      const anchorFn = (d: d3.PieArcDatum<ChartDonutItem>) => {
-        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-        return midAngle < Math.PI ? 'start' : 'end';
-      };
-
-      const $polylines = $chartContainer
-        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDonutItem>>(
-          '.item-polyline',
-        )
-        .data(pieData, d => d.data.name)
-        .join('polyline')
-        .attr('class', 'item-polyline');
-
-      const $labels = $chartContainer
-        .selectAll<SVGTextElement, d3.PieArcDatum<ChartDonutItem>>('.item-label')
-        .data(pieData, d => d.data.name)
-        .join('text')
-        .attr('class', 'item-label')
-        .text(d => d.data.label ?? '');
-
-      if (animate) {
-        $polylines
-          .transition()
-          .duration(DURATION)
-          .ease(d3.easeCubicInOut)
-          .attr('points', pointsFn);
-        $labels
-          .transition()
-          .duration(DURATION)
-          .ease(d3.easeCubicInOut)
-          .attr('transform', transformFn)
-          .style('text-anchor', anchorFn);
-      } else {
-        $polylines.attr('points', pointsFn);
-        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);
-      }
-    } else {
-      $chartContainer.selectAll('.item-polyline').remove();
-      $chartContainer.selectAll('.item-label').remove();
-    }
-  }
-
-  render() {
-    return html`
-      <div class="chart">
-        <svg>
-          <g class="chart-container">
-            <g class="arc-container"></g>
-            <text class="title" text-anchor="middle"></text>
-            <text class="label" text-anchor="middle" y="16">
-              ${this.label}
-            </text>
-          </g>
-        </svg>
-      </div>
-    `;
-  }
-}

package/src/chart-donut/demo/index.html

@@ -1,51 +0,0 @@
-<!doctype html>
-<html lang='en-GB'>
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles.css' />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-
-<wc-button id="randomize">Randomize</wc-button>
-<br />
-
-<wc-chart-doughnut width="400" margin="20"></wc-chart-doughnut>
-
-<script>
-  const chart = document.querySelector('wc-chart-doughnut');
-  chart.label = "Browsers";
-  chart.data = [
-    { label: 'Firefox', value: 10, color: '--color-red', hoverColor: '--color-red-40' },
-    { label: 'Chrome', value: 20, color: '--color-green', hoverColor: '--color-green-50' },
-    { label: 'Microsoft Edge', value: 30 },
-    { label: 'Internet Explorer', value: 40 },
-    { label: 'MC Browser', value: 50 },
-  ];
-
-  function randomNumber(min, max) {
-    return parseInt(Math.random() * (max - min) + min);
-  }
-
-  let count = 1;
-  document.querySelector('#randomize').addEventListener('click', () => {
-    chart.data = chart.data.map(d => ({ ...d, value: parseInt(Math.random() * 100) }));
-    chart.width =  randomNumber(400, 600);
-  });
-</script>
-
-
-<script type='module'>
-  import { Button, ChartDonut } from '/dist/index.js';
-  window.customElements.define('wc-chart-doughnut', ChartDonut);
-  window.customElements.define('wc-button', Button);
-</script>
-</body>
-</html>

package/src/chart-donut/index.ts

@@ -1 +0,0 @@
-export { ChartDonut } from './chart-donut.js';

package/src/styleMixins.css.ts

@@ -1,55 +0,0 @@
-import { css, unsafeCSS, CSSResult } from 'lit';
-
-export const focusRing = (
-  color = 'var(--border-interactive)',
-): CSSResult => css`
-  outline: 2px solid ${unsafeCSS(color)};
-`;
-
-export const getTypography = (name: string): CSSResult => css`
-  font-family: var(--typography-${unsafeCSS(name)}-font-family) !important;
-  font-size: var(--typography-${unsafeCSS(name)}-font-size) !important;
-  font-weight: var(--typography-${unsafeCSS(name)}-font-weight) !important;
-  line-height: var(--typography-${unsafeCSS(name)}-line-height) !important;
-  letter-spacing: var(
-    --typography-${unsafeCSS(name)}-letter-spacing
-  ) !important;
-`;
-
-export const getTypographyNotImportant = (name: string): CSSResult => css`
-  font-family: var(--typography-${unsafeCSS(name)}-font-family);
-  font-size: var(--typography-${unsafeCSS(name)}-font-size);
-  font-weight: var(--typography-${unsafeCSS(name)}-font-weight);
-  line-height: var(--typography-${unsafeCSS(name)}-line-height);
-  letter-spacing: var(--typography-${unsafeCSS(name)}-letter-spacing);
-`;
-
-export const forPhoneOnly = (content: CSSResult): CSSResult => css`
-  @media (max-width: 671px) {
-    ${content}
-  }
-`;
-
-export const forTabletPortraitUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 672px) {
-    ${content}
-  }
-`;
-
-export const forTabletLandscapeUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1056px) {
-    ${content}
-  }
-`;
-
-export const forDesktopUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1312px) {
-    ${content}
-  }
-`;
-
-export const forBigDesktopUp = (content: CSSResult): CSSResult => css`
-  @media (min-width: 1584px) {
-    ${content}
-  }
-`;