@activecollab/components 2.0.418 → 2.0.419

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

@@ -0,0 +1,726 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WidgetRankedList = exports.WidgetGroupBy = exports.WidgetGrid = exports.StatWidget = exports.StackedBarChartWidget = exports.PeriodPicker = exports.PERIOD_OPTIONS = exports.OverviewWidget = exports.OVERVIEW_SECTION_COLORS = exports.LeaderboardWidget = exports.DailyDeltaChartWidget = exports.CHART_SERIES_COLORS = exports.AreaChartWidget = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("./tokens");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _ProgressBar = require("../../components/ProgressBar");
+var _ProgressRing = require("../../components/ProgressRing");
+var _Select = require("../../components/Select");
+var _Tooltip = require("../../components/Tooltip");
+var _Typography = require("../../components/Typography");
+var _ValueButton = require("../../components/ValueButton");
+var _colors = require("../../utils/colors");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/*
+  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. */
+var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif';
+
+/** Axis-tick grey, same literal the real chart widgets use. */
+var TICK_COLOR = "#89898e";
+
+/** Stacked-chart series palette, same order as TotalTrackedHoursChart.js. */
+var CHART_SERIES_COLORS = exports.CHART_SERIES_COLORS = [_colors.colors.blueSky.color, _colors.colors.coral.color, _colors.colors.greenPale.color, _colors.colors.orange.color, _colors.colors.purple.color, _colors.colors.pink.color];
+
+/** Ring/section colour pairs used by the app's Projects Overview widget. */
+var OVERVIEW_SECTION_COLORS = exports.OVERVIEW_SECTION_COLORS = {
+  tasks: {
+    color: _colors.colors.purple.color,
+    track: "rgba(190, 172, 249, 0.2)"
+  },
+  time: {
+    color: _colors.colors.blueSky.color,
+    track: "rgba(163, 205, 255, 0.2)"
+  },
+  budget: {
+    color: _colors.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).
+*/
+var WidgetGrid = exports.WidgetGrid = _styledComponents.default.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;}}"], _tokens.SM, _tokens.MD, _tokens.LG, _tokens.SM, _tokens.MD, _tokens.LG, _tokens.SM, _tokens.MD, _tokens.LG);
+WidgetGrid.displayName = "WidgetGrid";
+
+/* ------------------------------------------------------------------ */
+/* Group-by picker (mirrors WidgetTarget in Widget.js)                  */
+/* ------------------------------------------------------------------ */
+
+/** The sort-lines icon button + radio list every widget corner uses. */
+var WidgetGroupBy = exports.WidgetGroupBy = function WidgetGroupBy(_ref) {
+  var _options$;
+  var options = _ref.options,
+    initial = _ref.initial,
+    _onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(initial !== null && initial !== void 0 ? initial : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.id),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  return /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    options: options,
+    selected: selected,
+    onChange: function onChange(value) {
+      setSelected(String(value));
+      _onChange === null || _onChange === void 0 || _onChange(String(value));
+    },
+    onSelectOpen: function onSelectOpen() {
+      return setOpen(true);
+    },
+    onSelectClose: function onSelectClose() {
+      return setOpen(false);
+    },
+    position: "bottom-end",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    disabledInternalSort: true,
+    target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      type: "button",
+      variant: "text gray",
+      active: open
+    }, /*#__PURE__*/_react.default.createElement(_Icons.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). */
+var PERIOD_OPTIONS = exports.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. */
+var PeriodPicker = exports.PeriodPicker = function PeriodPicker(_ref2) {
+  var _PERIOD_OPTIONS$find$, _PERIOD_OPTIONS$find;
+  var selected = _ref2.selected,
+    _onChange2 = _ref2.onChange;
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var value = (_PERIOD_OPTIONS$find$ = (_PERIOD_OPTIONS$find = PERIOD_OPTIONS.find(function (option) {
+    return option.id === selected;
+  })) === null || _PERIOD_OPTIONS$find === void 0 ? void 0 : _PERIOD_OPTIONS$find.name) !== null && _PERIOD_OPTIONS$find$ !== void 0 ? _PERIOD_OPTIONS$find$ : "";
+  return /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    options: PERIOD_OPTIONS,
+    selected: selected,
+    onChange: function onChange(next) {
+      return _onChange2(String(next));
+    },
+    onSelectOpen: function onSelectOpen() {
+      return setOpen(true);
+    },
+    onSelectClose: function onSelectClose() {
+      return setOpen(false);
+    },
+    position: "bottom-end",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    disabledInternalSort: true,
+    target: /*#__PURE__*/_react.default.createElement(_ValueButton.ValueButton, {
+      active: open,
+      label: "Period",
+      value: value
+    })
+  });
+};
+PeriodPicker.displayName = "PeriodPicker";
+
+/* ------------------------------------------------------------------ */
+/* Stat widget (mirrors Widget.js)                                      */
+/* ------------------------------------------------------------------ */
+
+var StyledWidget = _styledComponents.default.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.colors.greenSuccess.color);
+var StatWidget = exports.StatWidget = function StatWidget(_ref3) {
+  var 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.default.createElement(StyledWidget, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-top"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: alert ? "widget-total alert" : success ? "widget-total success" : "widget-total"
+  }, value, unit ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "widget-unit"
+  }, unit) : null), cornerControl || groupBy ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "widget-corner"
+  }, cornerControl, groupBy ? /*#__PURE__*/_react.default.createElement(WidgetGroupBy, groupBy) : null) : null), /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+    weight: "bold",
+    color: alert ? "alert" : "primary",
+    overflow: "truncate",
+    whitespace: "no-wrap",
+    className: "widget-title"
+  }, title), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "tertiary",
+    className: "widget-desc"
+  }, description), children, linkText ? /*#__PURE__*/_react.default.createElement("a", {
+    className: "widget-link"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "theme-primary",
+    weight: "medium"
+  }, linkText)) : null);
+};
+StatWidget.displayName = "StatWidget";
+
+/* ------------------------------------------------------------------ */
+/* Ranked list (mirrors WidgetList.js)                                  */
+/* ------------------------------------------------------------------ */
+
+var StyledRankedList = _styledComponents.default.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. */
+var WidgetRankedList = exports.WidgetRankedList = function WidgetRankedList(_ref4) {
+  var items = _ref4.items;
+  return /*#__PURE__*/_react.default.createElement(StyledRankedList, null, items.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "ranked-row",
+      key: item.name
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      color: "secondary",
+      className: "ranked-name"
+    }, item.name), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      color: "secondary",
+      className: "ranked-value"
+    }, item.value));
+  }));
+};
+WidgetRankedList.displayName = "WidgetRankedList";
+
+/* ------------------------------------------------------------------ */
+/* Overview widget (mirrors ProjectsOverview.js)                        */
+/* ------------------------------------------------------------------ */
+
+var RING_RADII = [121, 93, 63];
+var RING_STROKE = 20;
+var StyledOverview = _styledComponents.default.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;}}"], _tokens.SM, _tokens.SM, _tokens.SM);
+var ringColor = function ringColor(section, hovered) {
+  var 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)";
+};
+var ringTrack = function ringTrack(section, hovered) {
+  var active = !hovered || hovered === section.id;
+  return active ? section.trackColor : "var(--color-theme-200)";
+};
+var OverviewSection = function OverviewSection(_ref5) {
+  var section = _ref5.section,
+    onHover = _ref5.onHover;
+  var alert = section.progress > 100;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-section",
+    onMouseEnter: function onMouseEnter() {
+      return onHover(section.id);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return onHover(null);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "overview-line",
+    style: {
+      backgroundColor: alert ? "var(--red-alert)" : section.color
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-value"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Title2, {
+    lineHeight: "tight",
+    weight: "bold",
+    color: alert ? "alert" : "primary"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "overview-value-row"
+  }, section.value, section.unit ? /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "tertiary"
+  }, section.unit) : null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-desc"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "tertiary"
+  }, section.description), section.explainer ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: section.explainer
+  }, /*#__PURE__*/_react.default.createElement(_Icons.InfoSmallIcon, null)) : null), /*#__PURE__*/_react.default.createElement("a", {
+    className: "overview-link"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.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. */
+var OverviewWidget = exports.OverviewWidget = function OverviewWidget(_ref6) {
+  var title = _ref6.title,
+    subtitle = _ref6.subtitle,
+    sections = _ref6.sections,
+    headerRight = _ref6.headerRight;
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hovered = _useState8[0],
+    setHovered = _useState8[1];
+  var _nestRings = function nestRings(index) {
+    var section = sections[index];
+    if (!section) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_ProgressRing.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.default.createElement(StyledOverview, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-head"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+    weight: "bold"
+  }, title), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary"
+  }, subtitle)), headerRight), /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-sections"
+  }, sections.map(function (section) {
+    return /*#__PURE__*/_react.default.createElement(OverviewSection, {
+      key: section.id,
+      section: section,
+      onHover: setHovered
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "overview-rings"
+  }, _nestRings(0))));
+};
+OverviewWidget.displayName = "OverviewWidget";
+
+/* ------------------------------------------------------------------ */
+/* Chart scaffolding shared by the chart widgets                        */
+/* ------------------------------------------------------------------ */
+
+var PLOT_HEIGHT = 116;
+var StyledChartWidget = _styledComponents.default.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);
+var ChartHead = function ChartHead(_ref7) {
+  var title = _ref7.title,
+    linkText = _ref7.linkText;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-head"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+    weight: "bold",
+    overflow: "truncate",
+    whitespace: "no-wrap"
+  }, title), linkText ? /*#__PURE__*/_react.default.createElement("a", {
+    className: "chart-link"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "theme-primary",
+    weight: "medium"
+  }, linkText)) : null);
+};
+
+/* ------------------------------------------------------------------ */
+/* Area line chart (mirrors DailyOpenTasksWidget.js)                    */
+/* ------------------------------------------------------------------ */
+
+/** Line + gradient fill colours from the real widget. */
+var AREA_LINE = "#A3CDFF";
+/** Sharp-edged line with a soft gradient below, like "Number of Open Tasks". */
+var AreaChartWidget = exports.AreaChartWidget = function AreaChartWidget(_ref8) {
+  var title = _ref8.title,
+    linkText = _ref8.linkText,
+    points = _ref8.points,
+    xLabels = _ref8.xLabels,
+    yTicks = _ref8.yTicks;
+  var min = Math.min(...yTicks);
+  var max = Math.max(...yTicks);
+  var range = max - min || 1;
+  var W = 1000;
+  var toXY = function toXY(value, index) {
+    var x = index / Math.max(points.length - 1, 1) * W;
+    var y = (max - value) / range * PLOT_HEIGHT;
+    return "".concat(x.toFixed(1), ",").concat(y.toFixed(1));
+  };
+  var linePoints = points.map(toXY).join(" ");
+  var areaPoints = "0,".concat(PLOT_HEIGHT, " ").concat(linePoints, " ").concat(W, ",").concat(PLOT_HEIGHT);
+  return /*#__PURE__*/_react.default.createElement(StyledChartWidget, null, /*#__PURE__*/_react.default.createElement(ChartHead, {
+    title: title,
+    linkText: linkText
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-y-axis"
+  }, yTicks.map(function (tick) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: tick,
+      className: "chart-y-tick",
+      style: {
+        top: "".concat((max - tick) / range * PLOT_HEIGHT, "px")
+      }
+    }, tick);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-plot"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "100%",
+    height: PLOT_HEIGHT,
+    viewBox: "0 0 ".concat(W, " ").concat(PLOT_HEIGHT),
+    preserveAspectRatio: "none",
+    style: {
+      display: "block"
+    }
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "ac-area-gradient",
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "1"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0%",
+    stopColor: "rgba(163, 205, 255, 0.4)"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "100%",
+    stopColor: "rgba(163, 205, 255, 0)"
+  }))), /*#__PURE__*/_react.default.createElement("polygon", {
+    points: areaPoints,
+    fill: "url(#ac-area-gradient)"
+  }), /*#__PURE__*/_react.default.createElement("polyline", {
+    points: linePoints,
+    fill: "none",
+    stroke: AREA_LINE,
+    strokeWidth: 2.5,
+    vectorEffect: "non-scaling-stroke"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-x-axis"
+  }, xLabels.map(function (label) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: label
+    }, label);
+  })));
+};
+AreaChartWidget.displayName = "AreaChartWidget";
+
+/* ------------------------------------------------------------------ */
+/* Daily +/- bars (mirrors DailyCreatedAndCompletedTasksWidget.js)      */
+/* ------------------------------------------------------------------ */
+
+/** Bar colours from the real widget: new above, completed below. */
+var DELTA_UP = "#A3CDFF";
+var DELTA_DOWN = "#FF9C9C";
+var StyledDeltaBars = _styledComponents.default.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". */
+var DailyDeltaChartWidget = exports.DailyDeltaChartWidget = function DailyDeltaChartWidget(_ref9) {
+  var title = _ref9.title,
+    linkText = _ref9.linkText,
+    data = _ref9.data,
+    xLabels = _ref9.xLabels,
+    upMax = _ref9.upMax,
+    downMax = _ref9.downMax,
+    yTicksUp = _ref9.yTicksUp,
+    yTicksDown = _ref9.yTicksDown;
+  var upFrac = upMax / (upMax + downMax);
+  var zeroTop = upFrac * PLOT_HEIGHT;
+  var tickTop = function tickTop(value, below) {
+    return below ? zeroTop + value / downMax * (PLOT_HEIGHT - zeroTop) : zeroTop - value / upMax * zeroTop;
+  };
+  return /*#__PURE__*/_react.default.createElement(StyledChartWidget, null, /*#__PURE__*/_react.default.createElement(ChartHead, {
+    title: title,
+    linkText: linkText
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-y-axis"
+  }, yTicksUp.map(function (tick) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: "up-".concat(tick),
+      className: "chart-y-tick",
+      style: {
+        top: "".concat(tickTop(tick, false), "px")
+      }
+    }, tick);
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "chart-y-tick",
+    style: {
+      top: "".concat(zeroTop, "px")
+    }
+  }, "0"), yTicksDown.map(function (tick) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: "down-".concat(tick),
+      className: "chart-y-tick",
+      style: {
+        top: "".concat(tickTop(tick, true), "px")
+      }
+    }, tick);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-plot"
+  }, /*#__PURE__*/_react.default.createElement(StyledDeltaBars, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "delta-zero",
+    style: {
+      top: "".concat(zeroTop, "px")
+    }
+  }), data.map(function (point, index) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "delta-col",
+      key: index
+    }, point.up > 0 ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "delta-bar",
+      style: {
+        backgroundColor: DELTA_UP,
+        bottom: "".concat(PLOT_HEIGHT - zeroTop, "px"),
+        height: "".concat(point.up / upMax * zeroTop, "px")
+      }
+    }) : null, point.down > 0 ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "delta-bar",
+      style: {
+        backgroundColor: DELTA_DOWN,
+        top: "".concat(zeroTop + 1, "px"),
+        height: "".concat(point.down / downMax * (PLOT_HEIGHT - zeroTop), "px")
+      }
+    }) : null);
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "chart-x-axis"
+  }, xLabels.map(function (label) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: label
+    }, label);
+  })));
+};
+DailyDeltaChartWidget.displayName = "DailyDeltaChartWidget";
+
+/* ------------------------------------------------------------------ */
+/* Leaderboard (mirrors LeaderboardWidget.js)                           */
+/* ------------------------------------------------------------------ */
+
+var StyledLeaderboard = _styledComponents.default.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. */
+var LeaderboardWidget = exports.LeaderboardWidget = function LeaderboardWidget(_ref0) {
+  var title = _ref0.title,
+    description = _ref0.description,
+    rows = _ref0.rows,
+    groupBy = _ref0.groupBy;
+  return /*#__PURE__*/_react.default.createElement(StyledLeaderboard, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lb-head"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Header2, null, title), groupBy ? /*#__PURE__*/_react.default.createElement(WidgetGroupBy, groupBy) : null), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "tertiary",
+    className: "lb-desc"
+  }, description), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lb-sep"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lb-rows"
+  }, rows.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "lb-row",
+      key: row.label
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "lb-label"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      color: "theme-primary"
+    }, row.label)), /*#__PURE__*/_react.default.createElement("span", {
+      className: "lb-bar"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "lb-bar-inner",
+      style: {
+        width: "".concat(row.percentOfMax, "%"),
+        display: "block"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
+      progress: row.billableShare,
+      stroke: 8,
+      progressColor: _colors.colors.greenSuccess.color
+    }))), /*#__PURE__*/_react.default.createElement("span", {
+      className: "lb-value"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      color: "secondary"
+    }, row.value)));
+  })));
+};
+LeaderboardWidget.displayName = "LeaderboardWidget";
+
+/* ------------------------------------------------------------------ */
+/* Stacked columns (mirrors TotalTrackedHoursChart.js bar mode)         */
+/* ------------------------------------------------------------------ */
+
+var StyledStackedChart = _styledComponents.default.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. */
+var StackedBarChartWidget = exports.StackedBarChartWidget = function StackedBarChartWidget(_ref1) {
+  var 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;
+  var max = Math.max(...yTicks) || 1;
+  return /*#__PURE__*/_react.default.createElement(StyledStackedChart, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-head"
+  }, title ? /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+    weight: "bold"
+  }, title) : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sb-total-wrap"
+  }, total ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "sb-total"
+  }, total) : null, groupBy ? /*#__PURE__*/_react.default.createElement(WidgetGroupBy, groupBy) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-y-axis",
+    style: {
+      height: "".concat(height, "px")
+    }
+  }, yTicks.map(function (tick) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: tick,
+      className: "sb-y-tick",
+      style: {
+        top: "".concat((max - tick) / max * height, "px")
+      }
+    }, tick);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-plot",
+    style: {
+      height: "".concat(height, "px")
+    }
+  }, yTicks.map(function (tick) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: tick,
+      className: "sb-grid-line",
+      style: {
+        top: "".concat((max - tick) / max * height, "px")
+      }
+    });
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-cols"
+  }, data.map(function (column) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sb-slot",
+      key: column.label,
+      style: {
+        width: "".concat(barWidth, "px")
+      }
+    }, column.segments.map(function (value, index) {
+      var _seriesLabels$index;
+      return value > 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        key: (_seriesLabels$index = seriesLabels[index]) !== null && _seriesLabels$index !== void 0 ? _seriesLabels$index : index,
+        title: "".concat(seriesLabels[index], ": ").concat(value, "h")
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          display: "block",
+          height: "".concat(value / max * height, "px"),
+          backgroundColor: CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length]
+        }
+      })) : null;
+    }));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sb-labels"
+  }, data.map(function (column) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: column.label
+    }, column.label);
+  })));
+};
+StackedBarChartWidget.displayName = "StackedBarChartWidget";
+//# sourceMappingURL=dashboardWidgets.js.map