@activecollab/components 2.0.417 → 2.0.419

package/dist/esm/presentation/shared/dashboardWidgets.js

@@ -0,0 +1,665 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { LG, MD, SM } from "./tokens";
+import { IconButton } from "../../components/IconButton";
+import { InfoSmallIcon, SortListIcon } from "../../components/Icons";
+import { ProgressBar } from "../../components/ProgressBar";
+import { ProgressRing } from "../../components/ProgressRing";
+import { Select } from "../../components/Select";
+import { Tooltip } from "../../components/Tooltip";
+import { Body1, Body2, Header2, Title2 } from "../../components/Typography";
+import { ValueButton } from "../../components/ValueButton";
+import { colors } from "../../utils/colors";
+
+/*
+  Reusable dashboard widgets for the Presentation mock-ups.
+
+  These mirror the REAL report widgets in new-activecollab-front
+  (src/pages/Reports/Widgets/*): Widget.js (the stat card), WidgetList.js
+  (the striped ranked list), ProjectsOverview.js (accent-line sections +
+  nested ProgressRings), DailyOpenTasksWidget.js (area line chart),
+  DailyCreatedAndCompletedTasksWidget.js (daily +/- bars),
+  LeaderboardWidget.js and TotalTrackedHoursChart.js (stacked columns).
+  Dimensions, type sizes and colours are copied from that code so any
+  dashboard mock built from these reads exactly like the app; the charts are
+  plain SVG/CSS here (no chart.js in this Storybook).
+
+  Data colours (chart palette, tick grey #89898e) are hardcoded on purpose —
+  they are data, not theme — while all structure uses var(--…) tokens.
+*/
+
+/* Raw (non-Typography) text needs an explicit font — no global reset here. */
+const FONT_STACK = '-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif';
+
+/** Axis-tick grey, same literal the real chart widgets use. */
+const TICK_COLOR = "#89898e";
+
+/** Stacked-chart series palette, same order as TotalTrackedHoursChart.js. */
+export const CHART_SERIES_COLORS = [colors.blueSky.color, colors.coral.color, colors.greenPale.color, colors.orange.color, colors.purple.color, colors.pink.color];
+
+/** Ring/section colour pairs used by the app's Projects Overview widget. */
+export const OVERVIEW_SECTION_COLORS = {
+  tasks: {
+    color: colors.purple.color,
+    track: "rgba(190, 172, 249, 0.2)"
+  },
+  time: {
+    color: colors.blueSky.color,
+    track: "rgba(163, 205, 255, 0.2)"
+  },
+  budget: {
+    color: colors.greenPale.color,
+    track: "rgba(195, 231, 153, 0.2)"
+  }
+};
+
+/* ------------------------------------------------------------------ */
+/* Widget grid (mirrors AssignmentsDashboardGrid.js)                    */
+/* ------------------------------------------------------------------ */
+
+/*
+  The dashboard grid: 24px gaps, 192px rows, 1/2/3/4 columns by breakpoint.
+  Put DS <Paper type="paper-2"> cells directly inside and size them with:
+    .cell-overview — the big overview card (2×2 on desktop)
+    .cell-tall     — a 1×2 card (ranked lists)
+    .cell-wide     — a full-width row (charts)
+  Plain cells are 1×1 (stat cards).
+*/
+export const WidgetGrid = styled.div.withConfig({
+  displayName: "dashboardWidgets__WidgetGrid",
+  componentId: "sc-lm5ek4-0"
+})(["display:grid;gap:24px;width:100%;max-width:1440px;margin:0 auto 32px;grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:192px;@media (min-width:", "){grid-template-columns:repeat(2,minmax(0,1fr));}@media (min-width:", "){grid-template-columns:repeat(3,minmax(0,1fr));}@media (min-width:", "){grid-template-columns:repeat(4,minmax(0,1fr));}> .cell-overview{grid-row:span 3;@media (min-width:", "){grid-row:span 2;grid-column:span 2;}@media (min-width:", "){grid-column:span 3;}@media (min-width:", "){grid-column:span 2;}}> .cell-tall{grid-row:span 2;}> .cell-wide{@media (min-width:", "){grid-column:span 2;}@media (min-width:", "){grid-column:span 3;}@media (min-width:", "){grid-column:span 4;}}"], SM, MD, LG, SM, MD, LG, SM, MD, LG);
+WidgetGrid.displayName = "WidgetGrid";
+
+/* ------------------------------------------------------------------ */
+/* Group-by picker (mirrors WidgetTarget in Widget.js)                  */
+/* ------------------------------------------------------------------ */
+
+/** The sort-lines icon button + radio list every widget corner uses. */
+export const WidgetGroupBy = _ref => {
+  var _options$;
+  let options = _ref.options,
+    initial = _ref.initial,
+    onChange = _ref.onChange;
+  const _useState = useState(initial != null ? initial : (_options$ = options[0]) == null ? void 0 : _options$.id),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  const _useState2 = useState(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(Select, {
+    options: options,
+    selected: selected,
+    onChange: value => {
+      setSelected(String(value));
+      onChange == null || onChange(String(value));
+    },
+    onSelectOpen: () => setOpen(true),
+    onSelectClose: () => setOpen(false),
+    position: "bottom-end",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    disabledInternalSort: true,
+    target: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      active: open
+    }, /*#__PURE__*/React.createElement(SortListIcon, {
+      fill: "var(--color-theme-800)"
+    }))
+  });
+};
+WidgetGroupBy.displayName = "WidgetGroupBy";
+
+/* ------------------------------------------------------------------ */
+/* Time-period picker (the completed widgets' shared control)          */
+/* ------------------------------------------------------------------ */
+
+/** The app's completed-widget periods (CompletedWidgetTarget radio list). */
+export const PERIOD_OPTIONS = [{
+  id: "this_week",
+  name: "This Week"
+}, {
+  id: "last_week",
+  name: "Last Week"
+}, {
+  id: "this_month",
+  name: "This Month"
+}, {
+  id: "last_month",
+  name: "Last Month"
+}, {
+  id: "this_quarter",
+  name: "This Quarter"
+}, {
+  id: "last_quarter",
+  name: "Last Quarter"
+}, {
+  id: "this_year",
+  name: "This Year"
+}, {
+  id: "last_year",
+  name: "Last Year"
+}];
+/** One labelled period control (ValueButton + radio list) that a whole
+ *  section of period-scoped widgets can share. */
+export const PeriodPicker = _ref2 => {
+  var _PERIOD_OPTIONS$find$, _PERIOD_OPTIONS$find;
+  let selected = _ref2.selected,
+    onChange = _ref2.onChange;
+  const _useState3 = useState(false),
+    open = _useState3[0],
+    setOpen = _useState3[1];
+  const value = (_PERIOD_OPTIONS$find$ = (_PERIOD_OPTIONS$find = PERIOD_OPTIONS.find(option => option.id === selected)) == null ? void 0 : _PERIOD_OPTIONS$find.name) != null ? _PERIOD_OPTIONS$find$ : "";
+  return /*#__PURE__*/React.createElement(Select, {
+    options: PERIOD_OPTIONS,
+    selected: selected,
+    onChange: next => onChange(String(next)),
+    onSelectOpen: () => setOpen(true),
+    onSelectClose: () => setOpen(false),
+    position: "bottom-end",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    disabledInternalSort: true,
+    target: /*#__PURE__*/React.createElement(ValueButton, {
+      active: open,
+      label: "Period",
+      value: value
+    })
+  });
+};
+PeriodPicker.displayName = "PeriodPicker";
+
+/* ------------------------------------------------------------------ */
+/* Stat widget (mirrors Widget.js)                                      */
+/* ------------------------------------------------------------------ */
+
+const StyledWidget = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledWidget",
+  componentId: "sc-lm5ek4-1"
+})(["position:relative;height:100%;padding:16px 20px;box-sizing:border-box;overflow:hidden;.widget-top{display:flex;justify-content:space-between;gap:8px;}.widget-corner{display:flex;align-items:center;gap:4px;flex-shrink:0;}.widget-total{display:flex;width:100%;height:56px;margin-bottom:8px;font-family:", ";font-size:52px;font-weight:700;line-height:1;color:var(--color-theme-900);}.widget-total.alert{color:var(--red-alert);}.widget-total.success{color:", ";}.widget-total .widget-unit{align-self:center;margin-left:10px;font-size:20px;font-weight:600;line-height:1;color:var(--color-theme-600);}.widget-title{margin-bottom:8px;}.widget-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:40px;margin-bottom:8px;}.widget-link{display:inline-flex;cursor:pointer;text-decoration:none;}"], FONT_STACK, colors.greenSuccess.color);
+export const StatWidget = _ref3 => {
+  let value = _ref3.value,
+    unit = _ref3.unit,
+    title = _ref3.title,
+    description = _ref3.description,
+    linkText = _ref3.linkText,
+    alert = _ref3.alert,
+    success = _ref3.success,
+    groupBy = _ref3.groupBy,
+    cornerControl = _ref3.cornerControl,
+    children = _ref3.children;
+  return /*#__PURE__*/React.createElement(StyledWidget, null, /*#__PURE__*/React.createElement("div", {
+    className: "widget-top"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: alert ? "widget-total alert" : success ? "widget-total success" : "widget-total"
+  }, value, unit ? /*#__PURE__*/React.createElement("span", {
+    className: "widget-unit"
+  }, unit) : null), cornerControl || groupBy ? /*#__PURE__*/React.createElement("span", {
+    className: "widget-corner"
+  }, cornerControl, groupBy ? /*#__PURE__*/React.createElement(WidgetGroupBy, groupBy) : null) : null), /*#__PURE__*/React.createElement(Body1, {
+    weight: "bold",
+    color: alert ? "alert" : "primary",
+    overflow: "truncate",
+    whitespace: "no-wrap",
+    className: "widget-title"
+  }, title), /*#__PURE__*/React.createElement(Body2, {
+    color: "tertiary",
+    className: "widget-desc"
+  }, description), children, linkText ? /*#__PURE__*/React.createElement("a", {
+    className: "widget-link"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "theme-primary",
+    weight: "medium"
+  }, linkText)) : null);
+};
+StatWidget.displayName = "StatWidget";
+
+/* ------------------------------------------------------------------ */
+/* Ranked list (mirrors WidgetList.js)                                  */
+/* ------------------------------------------------------------------ */
+
+const StyledRankedList = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledRankedList",
+  componentId: "sc-lm5ek4-2"
+})(["height:216px;overflow-y:auto;padding:4px 0;.ranked-row{display:flex;align-items:center;justify-content:space-between;gap:4px;height:24px;padding:0 6px;margin-bottom:4px;border-radius:2px;box-sizing:border-box;}.ranked-row:nth-child(odd){background-color:var(--color-theme-200);}.ranked-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.ranked-value{flex-shrink:0;}"]);
+
+/** The striped name/count rows inside a tall stat widget. */
+export const WidgetRankedList = _ref4 => {
+  let items = _ref4.items;
+  return /*#__PURE__*/React.createElement(StyledRankedList, null, items.map(item => /*#__PURE__*/React.createElement("div", {
+    className: "ranked-row",
+    key: item.name
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary",
+    className: "ranked-name"
+  }, item.name), /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary",
+    className: "ranked-value"
+  }, item.value))));
+};
+WidgetRankedList.displayName = "WidgetRankedList";
+
+/* ------------------------------------------------------------------ */
+/* Overview widget (mirrors ProjectsOverview.js)                        */
+/* ------------------------------------------------------------------ */
+
+const RING_RADII = [121, 93, 63];
+const RING_STROKE = 20;
+const StyledOverview = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledOverview",
+  componentId: "sc-lm5ek4-3"
+})(["position:relative;display:flex;flex-direction:column;height:100%;padding:16px 20px;box-sizing:border-box;overflow:hidden;.overview-head{display:flex;justify-content:space-between;gap:8px;}.overview-body{display:flex;flex-direction:column-reverse;justify-content:space-between;gap:4px;height:100%;@media (min-width:", "){flex-direction:row;margin-top:48px;}}.overview-sections{display:flex;flex-direction:column;gap:24px;width:100%;height:fit-content;@media (min-width:", "){height:100%;}}.overview-section{display:flex;width:fit-content;height:fit-content;}.overview-line{width:2px;margin-right:12px;align-self:stretch;flex-shrink:0;}.overview-value{height:28px;margin-bottom:2px;}.overview-value-row{display:flex;align-items:flex-end;gap:4px;}.overview-desc{display:flex;align-items:center;gap:8px;}.overview-desc svg{cursor:help;flex-shrink:0;}.overview-link{display:inline-flex;margin-top:4px;cursor:pointer;text-decoration:none;}.overview-rings{display:flex;align-self:center;@media (min-width:", "){align-self:flex-end;}}@media (max-width:639px){.overview-rings{transform:scale(0.6);transform-origin:center;margin:-48px 0;}}"], SM, SM, SM);
+const ringColor = (section, hovered) => {
+  const active = !hovered || hovered === section.id;
+  if (section.progress > 100) {
+    return active ? "var(--red-alert)" : "rgba(237, 97, 97, 0.25)";
+  }
+  return active ? section.color : "var(--color-theme-200)";
+};
+const ringTrack = (section, hovered) => {
+  const active = !hovered || hovered === section.id;
+  return active ? section.trackColor : "var(--color-theme-200)";
+};
+const OverviewSection = _ref5 => {
+  let section = _ref5.section,
+    onHover = _ref5.onHover;
+  const alert = section.progress > 100;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "overview-section",
+    onMouseEnter: () => onHover(section.id),
+    onMouseLeave: () => onHover(null)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "overview-line",
+    style: {
+      backgroundColor: alert ? "var(--red-alert)" : section.color
+    }
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "overview-value"
+  }, /*#__PURE__*/React.createElement(Title2, {
+    lineHeight: "tight",
+    weight: "bold",
+    color: alert ? "alert" : "primary"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "overview-value-row"
+  }, section.value, section.unit ? /*#__PURE__*/React.createElement(Body2, {
+    color: "tertiary"
+  }, section.unit) : null))), /*#__PURE__*/React.createElement("div", {
+    className: "overview-desc"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "tertiary"
+  }, section.description), section.explainer ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: section.explainer
+  }, /*#__PURE__*/React.createElement(InfoSmallIcon, null)) : null), /*#__PURE__*/React.createElement("a", {
+    className: "overview-link"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "theme-primary",
+    weight: "medium"
+  }, section.linkText))));
+};
+
+/** The big overview card: accent-line metric sections + nested rings.
+ *  Hovering a section highlights its ring and mutes the other rings,
+ *  exactly like the app's Projects Overview. */
+export const OverviewWidget = _ref6 => {
+  let title = _ref6.title,
+    subtitle = _ref6.subtitle,
+    sections = _ref6.sections,
+    headerRight = _ref6.headerRight;
+  const _useState4 = useState(null),
+    hovered = _useState4[0],
+    setHovered = _useState4[1];
+  const nestRings = index => {
+    const section = sections[index];
+    if (!section) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ProgressRing, {
+      roundStroke: true,
+      progress: section.progress,
+      stroke: RING_STROKE,
+      radius: RING_RADII[index],
+      progressColor: ringColor(section, hovered),
+      backgroundColor: ringTrack(section, hovered)
+    }, nestRings(index + 1));
+  };
+  return /*#__PURE__*/React.createElement(StyledOverview, null, /*#__PURE__*/React.createElement("div", {
+    className: "overview-head"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Body1, {
+    weight: "bold"
+  }, title), /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, subtitle)), headerRight), /*#__PURE__*/React.createElement("div", {
+    className: "overview-body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "overview-sections"
+  }, sections.map(section => /*#__PURE__*/React.createElement(OverviewSection, {
+    key: section.id,
+    section: section,
+    onHover: setHovered
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "overview-rings"
+  }, nestRings(0))));
+};
+OverviewWidget.displayName = "OverviewWidget";
+
+/* ------------------------------------------------------------------ */
+/* Chart scaffolding shared by the chart widgets                        */
+/* ------------------------------------------------------------------ */
+
+const PLOT_HEIGHT = 116;
+const StyledChartWidget = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledChartWidget",
+  componentId: "sc-lm5ek4-4"
+})(["position:relative;height:100%;padding:16px 20px 0;box-sizing:border-box;overflow:hidden;.chart-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;}.chart-link{display:inline-flex;cursor:pointer;text-decoration:none;flex-shrink:0;}.chart-row{display:flex;gap:10px;}.chart-y-axis{position:relative;width:30px;height:", "px;flex-shrink:0;}.chart-y-tick{position:absolute;right:0;transform:translateY(-50%);font-family:", ";font-size:11px;color:", ";white-space:nowrap;}.chart-plot{position:relative;flex:1;min-width:0;height:", "px;}.chart-x-axis{display:flex;justify-content:space-between;margin-top:6px;padding-left:40px;font-family:", ";font-size:11px;color:", ";}.chart-x-axis span{white-space:nowrap;}"], PLOT_HEIGHT, FONT_STACK, TICK_COLOR, PLOT_HEIGHT, FONT_STACK, TICK_COLOR);
+const ChartHead = _ref7 => {
+  let title = _ref7.title,
+    linkText = _ref7.linkText;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "chart-head"
+  }, /*#__PURE__*/React.createElement(Body1, {
+    weight: "bold",
+    overflow: "truncate",
+    whitespace: "no-wrap"
+  }, title), linkText ? /*#__PURE__*/React.createElement("a", {
+    className: "chart-link"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "theme-primary",
+    weight: "medium"
+  }, linkText)) : null);
+};
+
+/* ------------------------------------------------------------------ */
+/* Area line chart (mirrors DailyOpenTasksWidget.js)                    */
+/* ------------------------------------------------------------------ */
+
+/** Line + gradient fill colours from the real widget. */
+const AREA_LINE = "#A3CDFF";
+/** Sharp-edged line with a soft gradient below, like "Number of Open Tasks". */
+export const AreaChartWidget = _ref8 => {
+  let title = _ref8.title,
+    linkText = _ref8.linkText,
+    points = _ref8.points,
+    xLabels = _ref8.xLabels,
+    yTicks = _ref8.yTicks;
+  const min = Math.min(...yTicks);
+  const max = Math.max(...yTicks);
+  const range = max - min || 1;
+  const W = 1000;
+  const toXY = (value, index) => {
+    const x = index / Math.max(points.length - 1, 1) * W;
+    const y = (max - value) / range * PLOT_HEIGHT;
+    return x.toFixed(1) + "," + y.toFixed(1);
+  };
+  const linePoints = points.map(toXY).join(" ");
+  const areaPoints = "0," + PLOT_HEIGHT + " " + linePoints + " " + W + "," + PLOT_HEIGHT;
+  return /*#__PURE__*/React.createElement(StyledChartWidget, null, /*#__PURE__*/React.createElement(ChartHead, {
+    title: title,
+    linkText: linkText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "chart-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-y-axis"
+  }, yTicks.map(tick => /*#__PURE__*/React.createElement("span", {
+    key: tick,
+    className: "chart-y-tick",
+    style: {
+      top: (max - tick) / range * PLOT_HEIGHT + "px"
+    }
+  }, tick))), /*#__PURE__*/React.createElement("div", {
+    className: "chart-plot"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: PLOT_HEIGHT,
+    viewBox: "0 0 " + W + " " + PLOT_HEIGHT,
+    preserveAspectRatio: "none",
+    style: {
+      display: "block"
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "ac-area-gradient",
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "1"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: "rgba(163, 205, 255, 0.4)"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: "rgba(163, 205, 255, 0)"
+  }))), /*#__PURE__*/React.createElement("polygon", {
+    points: areaPoints,
+    fill: "url(#ac-area-gradient)"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: linePoints,
+    fill: "none",
+    stroke: AREA_LINE,
+    strokeWidth: 2.5,
+    vectorEffect: "non-scaling-stroke"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "chart-x-axis"
+  }, xLabels.map(label => /*#__PURE__*/React.createElement("span", {
+    key: label
+  }, label))));
+};
+AreaChartWidget.displayName = "AreaChartWidget";
+
+/* ------------------------------------------------------------------ */
+/* Daily +/- bars (mirrors DailyCreatedAndCompletedTasksWidget.js)      */
+/* ------------------------------------------------------------------ */
+
+/** Bar colours from the real widget: new above, completed below. */
+const DELTA_UP = "#A3CDFF";
+const DELTA_DOWN = "#FF9C9C";
+const StyledDeltaBars = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledDeltaBars",
+  componentId: "sc-lm5ek4-5"
+})(["display:flex;height:100%;.delta-col{position:relative;flex:1;min-width:0;}.delta-bar{position:absolute;left:50%;width:4px;max-width:80%;transform:translateX(-50%);}.delta-zero{position:absolute;left:0;right:0;height:1px;background-color:", ";}"], TICK_COLOR);
+
+/** Thin daily bars above/below a zero line, like "New vs Completed Tasks". */
+export const DailyDeltaChartWidget = _ref9 => {
+  let title = _ref9.title,
+    linkText = _ref9.linkText,
+    data = _ref9.data,
+    xLabels = _ref9.xLabels,
+    upMax = _ref9.upMax,
+    downMax = _ref9.downMax,
+    yTicksUp = _ref9.yTicksUp,
+    yTicksDown = _ref9.yTicksDown;
+  const upFrac = upMax / (upMax + downMax);
+  const zeroTop = upFrac * PLOT_HEIGHT;
+  const tickTop = (value, below) => below ? zeroTop + value / downMax * (PLOT_HEIGHT - zeroTop) : zeroTop - value / upMax * zeroTop;
+  return /*#__PURE__*/React.createElement(StyledChartWidget, null, /*#__PURE__*/React.createElement(ChartHead, {
+    title: title,
+    linkText: linkText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "chart-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-y-axis"
+  }, yTicksUp.map(tick => /*#__PURE__*/React.createElement("span", {
+    key: "up-" + tick,
+    className: "chart-y-tick",
+    style: {
+      top: tickTop(tick, false) + "px"
+    }
+  }, tick)), /*#__PURE__*/React.createElement("span", {
+    className: "chart-y-tick",
+    style: {
+      top: zeroTop + "px"
+    }
+  }, "0"), yTicksDown.map(tick => /*#__PURE__*/React.createElement("span", {
+    key: "down-" + tick,
+    className: "chart-y-tick",
+    style: {
+      top: tickTop(tick, true) + "px"
+    }
+  }, tick))), /*#__PURE__*/React.createElement("div", {
+    className: "chart-plot"
+  }, /*#__PURE__*/React.createElement(StyledDeltaBars, null, /*#__PURE__*/React.createElement("span", {
+    className: "delta-zero",
+    style: {
+      top: zeroTop + "px"
+    }
+  }), data.map((point, index) => /*#__PURE__*/React.createElement("span", {
+    className: "delta-col",
+    key: index
+  }, point.up > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "delta-bar",
+    style: {
+      backgroundColor: DELTA_UP,
+      bottom: PLOT_HEIGHT - zeroTop + "px",
+      height: point.up / upMax * zeroTop + "px"
+    }
+  }) : null, point.down > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "delta-bar",
+    style: {
+      backgroundColor: DELTA_DOWN,
+      top: zeroTop + 1 + "px",
+      height: point.down / downMax * (PLOT_HEIGHT - zeroTop) + "px"
+    }
+  }) : null))))), /*#__PURE__*/React.createElement("div", {
+    className: "chart-x-axis"
+  }, xLabels.map(label => /*#__PURE__*/React.createElement("span", {
+    key: label
+  }, label))));
+};
+DailyDeltaChartWidget.displayName = "DailyDeltaChartWidget";
+
+/* ------------------------------------------------------------------ */
+/* Leaderboard (mirrors LeaderboardWidget.js)                           */
+/* ------------------------------------------------------------------ */
+
+const StyledLeaderboard = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledLeaderboard",
+  componentId: "sc-lm5ek4-6"
+})(["position:relative;height:100%;padding:16px 20px;box-sizing:border-box;overflow:hidden;.lb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}.lb-desc{margin-bottom:12px;}.lb-sep{border-bottom:1px solid var(--border-primary);margin-bottom:12px;}.lb-rows{max-height:288px;overflow-y:auto;}.lb-row{display:flex;align-items:center;gap:16px;height:32px;margin-bottom:4px;}.lb-label{width:208px;max-width:40%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;}.lb-bar{flex:1;min-width:0;height:8px;}.lb-bar-inner{min-width:8px;height:100%;border-radius:4px;overflow:hidden;}.lb-value{width:80px;flex-shrink:0;text-align:right;}"]);
+
+/** Ranked bars: label, billable/non-billable bar, value — like Time's
+ *  Leaderboard. Bar length = share of the leader; green = billable part. */
+export const LeaderboardWidget = _ref0 => {
+  let title = _ref0.title,
+    description = _ref0.description,
+    rows = _ref0.rows,
+    groupBy = _ref0.groupBy;
+  return /*#__PURE__*/React.createElement(StyledLeaderboard, null, /*#__PURE__*/React.createElement("div", {
+    className: "lb-head"
+  }, /*#__PURE__*/React.createElement(Header2, null, title), groupBy ? /*#__PURE__*/React.createElement(WidgetGroupBy, groupBy) : null), /*#__PURE__*/React.createElement(Body2, {
+    color: "tertiary",
+    className: "lb-desc"
+  }, description), /*#__PURE__*/React.createElement("div", {
+    className: "lb-sep"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "lb-rows"
+  }, rows.map(row => /*#__PURE__*/React.createElement("div", {
+    className: "lb-row",
+    key: row.label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lb-label"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "theme-primary"
+  }, row.label)), /*#__PURE__*/React.createElement("span", {
+    className: "lb-bar"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lb-bar-inner",
+    style: {
+      width: row.percentOfMax + "%",
+      display: "block"
+    }
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    progress: row.billableShare,
+    stroke: 8,
+    progressColor: colors.greenSuccess.color
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: "lb-value"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, row.value))))));
+};
+LeaderboardWidget.displayName = "LeaderboardWidget";
+
+/* ------------------------------------------------------------------ */
+/* Stacked columns (mirrors TotalTrackedHoursChart.js bar mode)         */
+/* ------------------------------------------------------------------ */
+
+const StyledStackedChart = styled.div.withConfig({
+  displayName: "dashboardWidgets__StyledStackedChart",
+  componentId: "sc-lm5ek4-7"
+})(["position:relative;height:100%;padding:16px 20px;box-sizing:border-box;overflow:hidden;.sb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}.sb-total-wrap{display:flex;align-items:flex-start;gap:8px;margin-left:auto;}.sb-total{font-family:", ";font-size:52px;font-weight:700;line-height:1;color:var(--color-theme-900);}.sb-row{display:flex;gap:10px;}.sb-y-axis{position:relative;width:30px;flex-shrink:0;}.sb-y-tick{position:absolute;right:0;transform:translateY(-50%);font-family:", ";font-size:11px;color:", ";}.sb-plot{position:relative;flex:1;min-width:0;}.sb-grid-line{position:absolute;left:0;right:0;height:1px;background-color:var(--color-theme-300);}.sb-cols{position:relative;display:flex;justify-content:space-around;align-items:flex-end;height:100%;}.sb-slot{display:flex;flex-direction:column-reverse;flex-shrink:0;}.sb-labels{display:flex;justify-content:space-around;margin-top:8px;padding-left:40px;font-family:", ";font-size:11px;color:", ";}"], FONT_STACK, FONT_STACK, TICK_COLOR, FONT_STACK, TICK_COLOR);
+
+/** Narrow stacked time columns, like the Time dashboard's tracked-hours
+ *  chart. Segment order and palette follow the real chart. */
+export const StackedBarChartWidget = _ref1 => {
+  let title = _ref1.title,
+    total = _ref1.total,
+    data = _ref1.data,
+    seriesLabels = _ref1.seriesLabels,
+    yTicks = _ref1.yTicks,
+    _ref1$barWidth = _ref1.barWidth,
+    barWidth = _ref1$barWidth === void 0 ? 28 : _ref1$barWidth,
+    _ref1$height = _ref1.height,
+    height = _ref1$height === void 0 ? 220 : _ref1$height,
+    groupBy = _ref1.groupBy;
+  const max = Math.max(...yTicks) || 1;
+  return /*#__PURE__*/React.createElement(StyledStackedChart, null, /*#__PURE__*/React.createElement("div", {
+    className: "sb-head"
+  }, title ? /*#__PURE__*/React.createElement(Body1, {
+    weight: "bold"
+  }, title) : null, /*#__PURE__*/React.createElement("span", {
+    className: "sb-total-wrap"
+  }, total ? /*#__PURE__*/React.createElement("span", {
+    className: "sb-total"
+  }, total) : null, groupBy ? /*#__PURE__*/React.createElement(WidgetGroupBy, groupBy) : null)), /*#__PURE__*/React.createElement("div", {
+    className: "sb-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sb-y-axis",
+    style: {
+      height: height + "px"
+    }
+  }, yTicks.map(tick => /*#__PURE__*/React.createElement("span", {
+    key: tick,
+    className: "sb-y-tick",
+    style: {
+      top: (max - tick) / max * height + "px"
+    }
+  }, tick))), /*#__PURE__*/React.createElement("div", {
+    className: "sb-plot",
+    style: {
+      height: height + "px"
+    }
+  }, yTicks.map(tick => /*#__PURE__*/React.createElement("span", {
+    key: tick,
+    className: "sb-grid-line",
+    style: {
+      top: (max - tick) / max * height + "px"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sb-cols"
+  }, data.map(column => /*#__PURE__*/React.createElement("div", {
+    className: "sb-slot",
+    key: column.label,
+    style: {
+      width: barWidth + "px"
+    }
+  }, column.segments.map((value, index) => {
+    var _seriesLabels$index;
+    return value > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+      key: (_seriesLabels$index = seriesLabels[index]) != null ? _seriesLabels$index : index,
+      title: seriesLabels[index] + ": " + value + "h"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "block",
+        height: value / max * height + "px",
+        backgroundColor: CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length]
+      }
+    })) : null;
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: "sb-labels"
+  }, data.map(column => /*#__PURE__*/React.createElement("span", {
+    key: column.label
+  }, column.label))));
+};
+StackedBarChartWidget.displayName = "StackedBarChartWidget";
+//# sourceMappingURL=dashboardWidgets.js.map