ag-common 0.0.655 → 0.0.657

package/dist/ui/components/LineChart/Base.js

@@ -34,6 +34,12 @@ const Svg = styled_1.default.svg `
   padding: 2px;
   width: calc(100% - 5px);
   height: calc(100% - 5px);
+
+  @keyframes dash {
+    to {
+      stroke-dashoffset: 1000;
+    }
+  }
 `;
 const LineChart = (p) => {
     var _a;
@@ -95,9 +101,18 @@ const LineChart = (p) => {
         } }, points.map((p2) => {
         var _a, _b, _c;
         return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(p2) },
+            //mouse selected
             (p2.origX === ((_c = (_b = (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data.selectedXs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.x) ||
-                p2.x1 === p2.x2) && (react_1.default.createElement("circle", { cx: `${p2.x2}%`, cy: `${p2.y2}%`, r: "8px", fill: p.colours[p2.name] })),
-            p2.x1 !== p2.x2 && (react_1.default.createElement("line", { strokeOpacity: legendItems.part.find((f) => f.name === p2.name) ? 1 : 0.3, x1: `${p2.x1}%`, x2: `${p2.x2}%`, y1: `${p2.y1}%`, y2: `${p2.y2}%`, style: { stroke: p.colours[p2.name] } }))));
+                //only single date point
+                p2.x1 === p2.x2 ||
+                //is the last point
+                p2.isLast) && (react_1.default.createElement("circle", Object.assign({ cx: `${p2.x2}%`, cy: `${p2.y2}%`, r: "8px", style: { zIndex: 1 } }, (p2.isToday && p2.isLast
+                ? { stroke: p.colours[p2.name], fill: 'transparent' }
+                : { fill: p.colours[p2.name] })))),
+            p2.x1 !== p2.x2 && (react_1.default.createElement("line", { strokeOpacity: legendItems.part.find((f) => f.name === p2.name) ? 1 : 0.3, x1: `${p2.x1}%`, x2: `${p2.x2}%`, y1: `${p2.y1}%`, y2: `${p2.y2}%`, style: Object.assign({ stroke: p.colours[p2.name] }, (p2.isToday && {
+                    strokeDasharray: 10,
+                    animation: 'dash 50s linear reverse infinite',
+                })) }))));
     })));
     return (react_1.default.createElement(Base, { className: p.className, "data-type": "lcb", onMouseLeave: () => UT.setPos(undefined), style: style },
         react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p2) => (react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p2, { colours: p.colours, data: p.data, lt: lt2, tt: tt2, legendItems: legendItems, style: style })))),

package/dist/ui/components/LineChart/LegendX.js

@@ -7,6 +7,7 @@ exports.LegendX = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const common_1 = require("../../../common");
+const styles_1 = require("../../styles");
 const getLegendItems_1 = require("./getLegendItems");
 const Base = styled_1.default.div `
   display: flex;
@@ -33,6 +34,13 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
+
+  @media ${styles_1.smallScreen} {
+    [data-group='1'],
+    [data-group='2'] {
+      display: none;
+    }
+  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -73,23 +81,23 @@ const LegendX = ({ data, lt, tt, colours, style, }) => {
     const minX = Math.min(...xs);
     const maxX = Math.max(...xs);
     const maxY = Math.max(...ys);
-    const itemsRaw = [minX];
+    const itemsRaw = [{ v: minX, group: 0 }];
     const gc = 8;
     const gap = (maxX - minX) / gc;
     if (gap > common_1.twelveHMs) {
         for (let a = 1; a < gc; a += 1) {
-            itemsRaw.push(itemsRaw[a - 1] + gap);
+            itemsRaw.push({ v: itemsRaw[a - 1].v + gap, group: (a % 3) + 1 });
         }
     }
-    itemsRaw.push(maxX);
-    const items = itemsRaw.map((d) => { var _a; return (_a = lt(d)) !== null && _a !== void 0 ? _a : d; });
+    itemsRaw.push({ v: maxX, group: 0 });
+    const items = itemsRaw.map((d) => { var _a; return ({ v: (_a = lt(d.v)) !== null && _a !== void 0 ? _a : d.v, group: d.group }); });
     const ch = maxY.toString().length + 1;
     return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { marginLeft: 'auto', width: `calc(100% - ${ch}ch)` }) },
         react_1.default.createElement(Bar, null,
             react_1.default.createElement(Line, { style: { backgroundColor: style.color } }),
             react_1.default.createElement(Numbers, null, items.map((i, i2) => (react_1.default.createElement("span", { 
                 // eslint-disable-next-line react/no-array-index-key
-                key: i + i2, style: { backgroundColor: style.backgroundColor } }, i))))),
+                key: i.v + i2, "data-group": i.group, style: { backgroundColor: style.backgroundColor } }, i.v))))),
         legendItems.length > 1 && (react_1.default.createElement(Items, null, legendItems.map((k) => (react_1.default.createElement(Item, { key: k.name },
             react_1.default.createElement(Col, { style: { backgroundColor: k.colour } }),
             k.name)))))));

package/dist/ui/components/LineChart/dateHelpers.d.ts

@@ -1,2 +1,3 @@
 export declare const timeLegendTitle: (s: number) => string;
 export declare const timeTooltipTitle: (s: number) => string;
+export declare const isToday: (s: number) => boolean;

package/dist/ui/components/LineChart/dateHelpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeTooltipTitle = exports.timeLegendTitle = void 0;
+exports.isToday = exports.timeTooltipTitle = exports.timeLegendTitle = void 0;
 const date_1 = require("../../helpers/date");
 const timeLegendTitle = (s) => {
     const ret = (0, date_1.getDMY)(new Date(s), { short: true });
@@ -26,3 +26,11 @@ const timeTooltipTitle = (s) => {
     return `${dmy} ${diff}`;
 };
 exports.timeTooltipTitle = timeTooltipTitle;
+const isToday = (s) => {
+    if (!s) {
+        return false;
+    }
+    const td = new Date().getTime() - Number(s);
+    return td < 0;
+};
+exports.isToday = isToday;

package/dist/ui/components/LineChart/interpolate.d.ts

@@ -7,6 +7,8 @@ interface ILineChartItemComp {
     name: string;
     origX: number;
     origY: number;
+    isToday: boolean;
+    isLast: boolean;
 }
 export declare const interpolate: (raw: ILineChartItemRaw[]) => {
     points: ILineChartItemComp[];

package/dist/ui/components/LineChart/interpolate.js

@@ -4,6 +4,7 @@ exports.interpolate = void 0;
 const common_1 = require("../../../common");
 const math_1 = require("../../../common/helpers/math");
 const date_1 = require("../../helpers/date");
+const dateHelpers_1 = require("./dateHelpers");
 const interpolate = (raw) => {
     const points = [];
     const xs = raw.map((r) => r.x);
@@ -46,6 +47,8 @@ const interpolate = (raw) => {
                 name: p.name,
                 origX: p.x,
                 origY: p.y,
+                isToday: (0, dateHelpers_1.isToday)(p.x),
+                isLast: i === items.length - 1,
             };
         });
         points.push(...(0, common_1.distinctBy)(p, (s) => JSON.stringify(s)));

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.655",
+  "version": "0.0.657",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",