@redvars/peacock 3.3.1 → 3.3.3

package/src/chart-bar/chart-stacked-bar.ts

@@ -0,0 +1,402 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import IndividualComponent from 'src/IndividualComponent.js';
+import * as d3 from 'd3';
+import styles from './chart-bar.scss';
+
+export type ChartStackedSegment = {
+  name: string;
+  value: number;
+  label?: string;
+  color?: string;
+};
+
+export type ChartStackedBarItem = {
+  name: string;
+  label?: string;
+  segments: ChartStackedSegment[];
+};
+
+const chartColors: string[] = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+  chartColors.push(`var(--color-${colorName})`);
+});
+
+const DEFAULT_WIDTH = 520;
+const DEFAULT_HEIGHT = 360;
+const BAR_RADIUS = 8;
+const DURATION = 450;
+
+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 Stacked Bar
+ * @tag wc-chart-stacked-bar
+ * @rawTag chart-stacked-bar
+ * @summary A stacked bar chart that groups series by category using Material Design 3 tokens.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-stacked-bar width="560" height="360"></wc-chart-stacked-bar>
+ * <script>
+ *   document.querySelector('wc-chart-stacked-bar').data = [
+ *     {
+ *       name: 'q1',
+ *       label: 'Q1',
+ *       segments: [
+ *         { name: 'mobile', label: 'Mobile', value: 40 },
+ *         { name: 'web', label: 'Web', value: 25 },
+ *         { name: 'store', label: 'Store', value: 15 },
+ *       ],
+ *     },
+ *     {
+ *       name: 'q2',
+ *       label: 'Q2',
+ *       segments: [
+ *         { name: 'mobile', label: 'Mobile', value: 32 },
+ *         { name: 'web', label: 'Web', value: 30 },
+ *         { name: 'store', label: 'Store', value: 18 },
+ *       ],
+ *     },
+ *   ];
+ * </script>
+ * ```
+ */
+@IndividualComponent
+export class ChartStackedBar extends LitElement {
+  static styles = [styles];
+
+  @query('svg')
+  private svgElement?: SVGElement;
+
+  /** Width of the chart in pixels. */
+  @property({ type: Number, reflect: true }) width: number = 0;
+
+  /** Height of the chart in pixels. */
+  @property({ type: Number, reflect: true }) height: number = DEFAULT_HEIGHT;
+
+  /** Margin around the chart drawing area. */
+  @property({ type: Number }) margin: number = 28;
+
+  /** Chart data array. Each item holds the stacked segments for a category. */
+  @property({ type: Array }) data: ChartStackedBarItem[] = [];
+
+  /** Whether to render total value labels above each stack. */
+  @property({ type: Boolean, attribute: 'show-values' }) showValues: boolean = true;
+
+  /** Whether to render the legend. */
+  @property({ type: Boolean, attribute: 'show-legend' }) showLegend: boolean = true;
+
+  private _initialized = false;
+
+  private _debouncedRenderChart = debounce(() => {
+    this._renderChart(true);
+  }, 200);
+
+  firstUpdated() {
+    this._renderChart(false);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (!this._initialized) {
+      this._initialized = true;
+      return;
+    }
+    const watchedProps = [
+      'width',
+      'height',
+      'margin',
+      'data',
+      'showValues',
+      'showLegend',
+    ];
+    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+    if (hasChanged) {
+      this._debouncedRenderChart();
+    }
+  }
+
+  private _getSegmentKeys() {
+    const keys = new Set<string>();
+    this.data?.forEach(item => {
+      item.segments?.forEach(segment => keys.add(segment.name));
+    });
+    return Array.from(keys);
+  }
+
+  private _getColorScale(keys: string[]) {
+    return d3
+      .scaleOrdinal<string, string>()
+      .domain(keys)
+      .range(chartColors);
+  }
+
+  private _getColorMap(
+    keys: string[],
+    scale: d3.ScaleOrdinal<string, string>,
+  ) {
+    const map = new Map<string, string>();
+    keys.forEach(key => {
+      const override = this.data
+        .map(item => item.segments.find(seg => seg.name === key)?.color)
+        .find(color => !!color);
+      map.set(key, override || scale(key));
+    });
+    return map;
+  }
+
+  private _getSegmentLabel(key: string) {
+    const segment = this.data
+      .map(item => item.segments.find(seg => seg.name === key))
+      .find(Boolean);
+    return segment?.label ?? key;
+  }
+
+  private _getTotals() {
+    return this.data.map(item =>
+      item.segments.reduce((sum, seg) => sum + seg.value, 0),
+    );
+  }
+
+  private _renderChart(animate: boolean) {
+    if (!this.svgElement) return;
+
+    const width = this.width > 0 ? this.width : DEFAULT_WIDTH;
+    const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;
+    const margin = Math.max(this.margin, 16);
+    const data = this.data ?? [];
+
+    const svg = d3.select(this.svgElement);
+    svg.attr('width', width).attr('height', height);
+
+    const innerWidth = Math.max(width - margin * 2, 0);
+    const innerHeight = Math.max(height - margin * 2, 0);
+
+    const container = svg.select<SVGGElement>('.chart-container');
+    container.attr('transform', `translate(${margin},${margin})`);
+
+    if (!data.length || innerWidth === 0 || innerHeight === 0) {
+      container.select('.bars').selectAll('*').remove();
+      container.select('.x-axis').selectAll('*').remove();
+      container.select('.y-grid').selectAll('*').remove();
+      container.select('.value-labels').selectAll('*').remove();
+      return;
+    }
+
+    const keys = this._getSegmentKeys();
+    const colorScale = this._getColorScale(keys);
+    const colorMap = this._getColorMap(keys, colorScale);
+
+    const totals = this._getTotals();
+    const xScale = d3
+      .scaleBand<string>()
+      .domain(data.map(d => d.name))
+      .range([0, innerWidth])
+      .padding(0.3);
+    const maxValue = d3.max(totals) ?? 0;
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, maxValue || 1])
+      .nice()
+      .range([innerHeight, 0]);
+
+    const stackedSeries = d3
+      .stack<ChartStackedBarItem, string>()
+      .keys(keys)
+      .value(
+        (d, key) => d.segments.find(segment => segment.name === key)?.value ?? 0,
+      )(data);
+
+    const yGrid = container.select<SVGGElement>('.y-grid');
+    yGrid
+      .call(
+        d3
+          .axisLeft(yScale)
+          .ticks(5)
+          .tickSize(-innerWidth)
+          .tickFormat(() => ''),
+      )
+      .selectAll('.tick text')
+      .remove();
+    yGrid.select('.domain').remove();
+    yGrid.selectAll('.tick line').attr('class', 'gridline');
+
+    const xAxis = container.select<SVGGElement>('.x-axis');
+    xAxis
+      .attr('transform', `translate(0,${innerHeight})`)
+      .call(
+        d3
+          .axisBottom(xScale)
+          .tickSizeOuter(0)
+          .tickFormat(name => {
+            const entry = data.find(d => d.name === name);
+            return entry?.label ?? name;
+          }),
+      );
+    xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');
+    xAxis.selectAll('.tick line').remove();
+    xAxis
+      .selectAll('.tick text')
+      .attr('class', 'axis-label')
+      .attr('dy', '1.1em');
+
+    const barGroups = container
+      .select('.bars')
+      .selectAll<SVGGElement, d3.Series<ChartStackedBarItem, string>>(
+        '.bar-group',
+      )
+      .data(stackedSeries, series => series.key)
+      .join(
+        enter =>
+          enter
+            .append('g')
+            .attr('class', 'bar-group')
+            .style('fill', series => colorMap.get(series.key) ?? ''),
+        update => update,
+        exit => exit.remove(),
+      )
+      .style('fill', series => colorMap.get(series.key) ?? colorScale(series.key));
+
+    const segmentJoin = barGroups
+      .selectAll<SVGRectElement, d3.SeriesPoint<ChartStackedBarItem>>('rect')
+      .data(series => series, d => d.data.name)
+      .join(
+        enter =>
+          enter
+            .append('rect')
+            .attr('class', 'stacked-segment')
+            .attr('x', d => xScale(d.data.name) ?? 0)
+            .attr('width', xScale.bandwidth())
+            .attr('y', innerHeight)
+            .attr('height', 0)
+            .attr('rx', BAR_RADIUS)
+            .attr('ry', BAR_RADIUS),
+        update => update,
+        exit =>
+          exit
+            .transition()
+            .duration(DURATION)
+            .attr('y', innerHeight)
+            .attr('height', 0)
+            .remove(),
+      );
+
+    segmentJoin
+      .attr('x', d => xScale(d.data.name) ?? 0)
+      .attr('width', xScale.bandwidth())
+      .attr('rx', BAR_RADIUS)
+      .attr('ry', BAR_RADIUS);
+
+    if (animate) {
+      segmentJoin
+        .transition()
+        .duration(DURATION)
+        .attr('y', d => yScale(d[1]))
+        .attr('height', d => yScale(d[0]) - yScale(d[1]));
+    } else {
+      segmentJoin
+        .attr('y', d => yScale(d[1]))
+        .attr('height', d => yScale(d[0]) - yScale(d[1]));
+    }
+
+    const totalLabels = container
+      .select('.value-labels')
+      .selectAll<SVGTextElement, ChartStackedBarItem>('text')
+      .data(this.showValues ? data : [], d => d.name)
+      .join(
+        enter =>
+          enter
+            .append('text')
+            .attr('class', 'value-label')
+            .attr('text-anchor', 'middle')
+            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+            .attr('y', innerHeight - 6)
+            .text(d =>
+              d.segments
+                .reduce((sum, seg) => sum + seg.value, 0)
+                .toLocaleString(),
+            ),
+        update => update,
+        exit => exit.remove(),
+      );
+
+    const labelPosition = (item: ChartStackedBarItem) => {
+      const total = item.segments.reduce((sum, seg) => sum + seg.value, 0);
+      const offset = yScale(total) - 8;
+      return Math.min(offset, innerHeight - 8);
+    };
+
+    if (animate) {
+      totalLabels
+        .transition()
+        .duration(DURATION)
+        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+        .attr('y', d => labelPosition(d))
+        .text(d =>
+          d.segments
+            .reduce((sum, seg) => sum + seg.value, 0)
+            .toLocaleString(),
+        );
+    } else {
+      totalLabels
+        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+        .attr('y', d => labelPosition(d))
+        .text(d =>
+          d.segments
+            .reduce((sum, seg) => sum + seg.value, 0)
+            .toLocaleString(),
+        );
+    }
+  }
+
+  render() {
+    const keys = this._getSegmentKeys();
+    const colorScale = this._getColorScale(keys);
+    const colorMap = this._getColorMap(keys, colorScale);
+
+    const legendItems = keys.map(key => ({
+      name: this._getSegmentLabel(key),
+      color: colorMap.get(key) ?? colorScale(key),
+    }));
+
+    return html`
+      <div class="chart-frame">
+        <svg role="img" aria-label="Stacked bar chart">
+          <g class="chart-container">
+            <g class="y-grid"></g>
+            <g class="bars"></g>
+            <g class="x-axis"></g>
+            <g class="value-labels"></g>
+          </g>
+        </svg>
+        ${this.showLegend && legendItems.length
+          ? html`<div class="legend" role="list">
+              ${legendItems.map(
+                item => html`<span class="legend-item" role="listitem">
+                  <span
+                    class="swatch"
+                    style=${styleMap({ background: item.color })}
+                  ></span>
+                  <span>${item.name}</span>
+                </span>`,
+              )}
+            </div>`
+          : null}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wc-chart-stacked-bar': ChartStackedBar;
+  }
+}

package/src/chart-bar/index.ts

@@ -0,0 +1,2 @@
+export { ChartBar } from './chart-bar.js';
+export { ChartStackedBar } from './chart-stacked-bar.js';

package/src/index.ts

@@ -22,6 +22,7 @@ export { DatePicker } from './date-picker/index.js';
 export { TimePicker } from './time-picker/index.js';
 export { Textarea } from './textarea/index.js';
 export { Switch } from './switch/index.js';
+export { Checkbox } from './checkbox/index.js';
 export { Spinner } from './spinner/index.js';
 export { Container } from './container/index.js';
 
@@ -36,8 +37,13 @@ export { CodeEditor } from './code-editor/index.js';
 export { Image } from './image/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
+export { ChartDonut } from './chart-donut/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
 export { ChartPie } from './chart-pie/index.js';
+export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
 export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
 export { TreeView, TreeNode } from './tree-view/index.js';
+export { Card } from './card/index.js';
+export { Snackbar } from './snackbar/index.js';
+export { Radio } from './radio/index.js';

package/src/menu/menu-item/menu-item.ts

@@ -8,7 +8,7 @@ import colorStyles from './menu-item-colors.scss';
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu-list
+ * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *

package/src/peacock-loader.ts

@@ -19,6 +19,7 @@ import { TimePicker } from './time-picker/time-picker.js';
 import { Textarea } from './textarea/textarea.js';
 import { Switch } from './switch/switch.js';
 import { Checkbox } from './checkbox/checkbox.js';
+import { Radio } from './radio/radio.js';
 
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
@@ -51,6 +52,8 @@ import { Slider } from './slider/slider.js';
 import { Table } from './table/table.js';
 import { Pagination } from './pagination/pagination.js';
 import { TreeView } from './tree-view/tree-view.js';
+import { Card } from './card/card.js';
+import { Snackbar } from './snackbar/snackbar.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -135,6 +138,9 @@ const loaderConfig: LoaderConfig = {
     'wc-chip': {
       CustomElementClass: Chip,
     },
+    'wc-card': {
+      CustomElementClass: Card,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -190,6 +196,9 @@ const loaderConfig: LoaderConfig = {
     'wc-checkbox': {
       CustomElementClass: Checkbox,
     },
+    'wc-radio': {
+      CustomElementClass: Radio,
+    },
     'wc-spinner': {
       CustomElementClass: Spinner,
     },
@@ -226,12 +235,21 @@ const loaderConfig: LoaderConfig = {
     'wc-tree-node': {
       CustomElementClass: TreeView.Node,
     },
+    'wc-snackbar': {
+      CustomElementClass: Snackbar,
+    },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },
     'wc-chart-pie': {
       importPath: `${distDirectory}/chart-pie.js`,
     },
+    'wc-chart-bar': {
+      importPath: `${distDirectory}/chart-bar.js`,
+    },
+    'wc-chart-stacked-bar': {
+      importPath: `${distDirectory}/chart-stacked-bar.js`,
+    },
   },
 };
 

package/src/radio/index.ts

@@ -0,0 +1 @@
+export { Radio } from './radio.js';

package/src/radio/radio.scss

@@ -0,0 +1,181 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-block;
+  --radio-size: 20px;
+  --radio-dot-size: 12px;
+  --radio-selected-color: var(--color-primary);
+  --radio-unselected-color: var(--color-on-surface-variant);
+  --radio-state-layer-size: 40px;
+  --radio-disabled-opacity: 0.38;
+}
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: 8px;
+
+  @include mixin.get-typography('body-medium');
+
+  .input-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-state-layer-size);
+    height: var(--radio-state-layer-size);
+    cursor: inherit;
+    outline: none;
+    flex-shrink: 0;
+  }
+
+  .state-layer {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity var(--duration-short2) var(--easing-standard);
+  }
+
+  .outer-circle {
+    position: absolute;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border: 2px solid var(--radio-unselected-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+    transition: border-color var(--duration-short2) var(--easing-standard);
+  }
+
+  .inner-circle {
+    position: absolute;
+    width: var(--radio-dot-size);
+    height: var(--radio-dot-size);
+    background: var(--radio-selected-color);
+    border-radius: 50%;
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      transform var(--duration-short2) var(--easing-standard),
+      opacity var(--duration-short2) var(--easing-standard);
+  }
+
+  .label {
+    color: var(--color-on-surface);
+    cursor: inherit;
+  }
+
+  // Hover state
+  &:hover:not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.08;
+      background: var(--color-on-surface);
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+
+  // Focus state
+  &.has-focus:not(.active):not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.12;
+      background: var(--color-on-surface);
+    }
+
+    .container {
+      outline: 3px solid var(--color-primary);
+      outline-offset: 2px;
+      border-radius: 50%;
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+
+  // Active/pressed state
+  &.active:not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.12;
+      background: var(--color-on-surface);
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+}
+
+// Checked state
+.radio.state-checked {
+  .outer-circle {
+    border-color: var(--radio-selected-color);
+  }
+
+  .inner-circle {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Readonly state
+.radio.readonly {
+  cursor: default;
+
+  .state-layer {
+    display: none;
+  }
+
+  .outer-circle {
+    border-color: var(--color-on-surface-variant);
+  }
+
+  &.state-checked {
+    .inner-circle {
+      background: var(--color-on-surface-variant);
+    }
+  }
+}
+
+// Disabled state
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: var(--radio-disabled-opacity);
+
+  .state-layer {
+    display: none;
+  }
+
+  .label {
+    color: var(--color-on-surface);
+  }
+
+  .outer-circle {
+    border-color: var(--color-on-surface);
+  }
+
+  &.state-checked {
+    .inner-circle {
+      background: var(--color-on-surface);
+    }
+  }
+}