ag-common 0.0.649 → 0.0.651

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

@@ -10,15 +10,18 @@ const react_1 = __importDefault(require("react"));
 const array_1 = require("../../../common/helpers/array");
 const math_1 = require("../../../common/helpers/math");
 const useTooltip_1 = require("../../helpers/useTooltip");
+const FlexRow_1 = require("../FlexRow");
 const dateHelpers_1 = require("./dateHelpers");
 const getLegendItems_1 = require("./getLegendItems");
 const interpolate_1 = require("./interpolate");
-const Legend_1 = require("./Legend");
+const LegendX_1 = require("./LegendX");
+const LegendY_1 = require("./LegendY");
 const TooltipContent_1 = require("./TooltipContent");
 const Base = styled_1.default.div `
-  width: calc(100% - 1px);
-  height: calc(100% - 1px);
   padding: 0.5rem;
+  width: calc(100% - 1rem);
+  height: calc(100% - 1rem);
+
   display: flex;
   flex-flow: column;
   justify-content: center;
@@ -26,6 +29,13 @@ const Base = styled_1.default.div `
   overflow: hidden;
   position: relative;
 `;
+const Svg = styled_1.default.svg `
+  padding: 2px;
+  border-left: solid 1px var(--main-fg);
+  border-top: solid 1px var(--main-fg);
+  width: calc(100% - 5px);
+  height: calc(100% - 5px);
+`;
 const LineChart = (p) => {
     var _a;
     const UT = (0, useTooltip_1.useTooltip)();
@@ -46,50 +56,51 @@ const LineChart = (p) => {
     }
     const lt2 = lt;
     const tt2 = tt;
-    const legendItems = (0, getLegendItems_1.getLegendItems)(Object.assign({ colours: p.colours, data: p.data, tt: tt2, lt: lt2 }, (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data));
+    const legendItems = (0, getLegendItems_1.getLegendItems)(Object.assign(Object.assign({ colours: p.colours, data: p.data, tt: tt2, lt: lt2 }, (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data), { fixed: false }));
+    const SvgC = (react_1.default.createElement(Svg, { transform: "scale(-1,1) scale(-1,-1)", strokeWidth: '3px', fillOpacity: 1, preserveAspectRatio: "none", onMouseMove: (element) => {
+            const parent = element.currentTarget.closest("[data-type='lcb']");
+            const bb = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect();
+            if (!bb) {
+                return;
+            }
+            const relativeX = (0, math_1.rangePercentage)({
+                value: element.pageX,
+                min: bb.left,
+                max: bb.left + bb.width,
+            }) * 100;
+            let selectedPoints = points.filter((p) => relativeX >= p.x1 && relativeX < p.x2);
+            //if there are just single dots on the graph, choose the ones that are closest (share the smallest gap distance)
+            if (selectedPoints.length === 0) {
+                const sp1 = points
+                    .map((p) => (Object.assign(Object.assign({}, p), { gap: Math.abs(p.x1 - relativeX) })))
+                    .sort((a, b) => (a.gap < b.gap ? -1 : 1));
+                const mingap = sp1 === null || sp1 === void 0 ? void 0 : sp1[0].gap;
+                selectedPoints = sp1.filter((r) => r.gap === mingap);
+            }
+            const selectedXs = (0, array_1.distinctBy)(p.data.filter(({ x, y }) => selectedPoints === null || selectedPoints === void 0 ? void 0 : selectedPoints.find((a) => a.origX === x && a.origY === y)), (s) => JSON.stringify(s));
+            UT.setPos({
+                element,
+                parent,
+                data: {
+                    selectedPoints: selectedPoints.map((a) => ({
+                        x: a.origX,
+                        y: a.origY,
+                    })),
+                    selectedXs,
+                },
+            });
+        } }, points.map((p2) => {
+        var _a, _b, _c;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(p2) },
+            (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] } }))));
+    })));
     return (react_1.default.createElement(Base, { className: p.className, "data-type": "lcb", onMouseLeave: () => UT.setPos(undefined) },
         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 })))),
-        react_1.default.createElement("svg", { 
-            //slight offset to show circles
-            viewBox: `-1 -1 102 102`, transform: "scale(-1,1) scale(-1,-1)", width: "100%", height: "100%", strokeWidth: '0.3%', fillOpacity: 1, preserveAspectRatio: "none", onMouseMove: (element) => {
-                const parent = element.currentTarget.closest("[data-type='lcb']");
-                const bb = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect();
-                if (!bb) {
-                    return;
-                }
-                const relativeX = (0, math_1.rangePercentage)({
-                    value: element.pageX,
-                    min: bb.left,
-                    max: bb.left + bb.width,
-                }) * 100;
-                let selectedPoints = points.filter((p) => relativeX >= p.x1 && relativeX < p.x2);
-                //if there are just single dots on the graph, choose the ones that are closest (share the smallest gap distance)
-                if (selectedPoints.length === 0) {
-                    const sp1 = points
-                        .map((p) => (Object.assign(Object.assign({}, p), { gap: Math.abs(p.x1 - relativeX) })))
-                        .sort((a, b) => (a.gap < b.gap ? -1 : 1));
-                    const mingap = sp1 === null || sp1 === void 0 ? void 0 : sp1[0].gap;
-                    selectedPoints = sp1.filter((r) => r.gap === mingap);
-                }
-                const selectedXs = (0, array_1.distinctBy)(p.data.filter(({ x, y }) => selectedPoints === null || selectedPoints === void 0 ? void 0 : selectedPoints.find((a) => a.origX === x && a.origY === y)), (s) => JSON.stringify(s));
-                UT.setPos({
-                    element,
-                    parent,
-                    data: {
-                        selectedPoints: selectedPoints.map((a) => ({
-                            x: a.origX,
-                            y: a.origY,
-                        })),
-                        selectedXs,
-                    },
-                });
-            } }, points.map((p2) => {
-            var _a, _b, _c;
-            return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(p2) },
-                (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: 1, 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] } }))));
-        })),
-        react_1.default.createElement(Legend_1.Legend, { data: p.data, colours: p.colours, lt: lt })));
+        react_1.default.createElement(FlexRow_1.FlexRow, { noWrap: true },
+            react_1.default.createElement(LegendY_1.LegendY, { data: p.data }),
+            SvgC),
+        react_1.default.createElement(LegendX_1.LegendX, { data: p.data, colours: p.colours, lt: lt, tt: tt })));
 };
 exports.LineChart = LineChart;

package/dist/ui/components/LineChart/{Legend.d.ts → LegendX.d.ts}

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { ILineChartItemRaw } from './types';
-export declare const Legend: ({ data, lt, colours, }: {
+export declare const LegendX: ({ data, lt, tt, colours, }: {
     data: ILineChartItemRaw[];
     colours: Record<string, string>;
     lt: (a: number) => string;
+    tt: (a: number) => string;
 }) => React.JSX.Element;

package/dist/ui/components/LineChart/{Legend.js → LegendX.js}

@@ -3,15 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Legend = void 0;
+exports.LegendX = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const common_1 = require("../../../common");
-const array_1 = require("../../../common/helpers/array");
+const getLegendItems_1 = require("./getLegendItems");
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   width: 100%;
+  color: var(--main-fg);
 `;
 const Bar = styled_1.default.div `
   width: 100%;
@@ -34,6 +35,7 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
+
   > span {
     background-color: var(--main-bg);
   }
@@ -44,13 +46,19 @@ const Items = styled_1.default.div `
   flex-flow: row wrap;
   position: relative;
   justify-content: space-between;
+  margin-top: 0.5rem;
 `;
 const Item = styled_1.default.div `
   display: flex;
   flex-flow: row;
   position: relative;
   align-items: center;
-  flex-basis: 25%;
+  &:not(:first-of-type) {
+    padding-left: 0.5rem;
+  }
+  &:not(:last-of-type) {
+    padding-right: 0.5rem;
+  }
 `;
 const Col = styled_1.default.div `
   width: 1rem;
@@ -58,38 +66,31 @@ const Col = styled_1.default.div `
   border-radius: 50%;
   margin-right: 0.25rem;
 `;
-const legendItemsKeys = ({ data, colours, }) => {
-    const val = {};
-    data.forEach((d) => {
-        if (!val[d.name]) {
-            val[d.name] = { colour: colours[d.name], name: d.name, value: d.y };
-        }
-        else {
-            val[d.name].value += d.y;
-        }
-    });
-    const values = Object.values(val);
-    const legendItems = (0, array_1.take)(values, 3).part.map((v) => ({
-        colour: v.colour,
-        name: v.name,
-    }));
-    return legendItems;
-};
-const Legend = ({ data, lt, colours, }) => {
-    const legendItems = legendItemsKeys({ data, colours });
+const LegendX = ({ data, lt, tt, colours, }) => {
+    const legendItems = (0, getLegendItems_1.getLegendItems)({
+        data,
+        colours,
+        fixed: true,
+        lt,
+        tt,
+    }).part;
     const xs = data.map((a) => a.x);
+    const ys = data.map((a) => a.y);
     const minX = Math.min(...xs);
     const maxX = Math.max(...xs);
+    const maxY = Math.max(...ys);
     const itemsRaw = [minX];
-    const gap = (maxX - minX) / 10;
+    const gc = 8;
+    const gap = (maxX - minX) / gc;
     if (gap > common_1.twelveHMs) {
-        for (let a = 1; a < 9; a += 1) {
+        for (let a = 1; a < gc; a += 1) {
             itemsRaw.push(itemsRaw[a - 1] + gap);
         }
     }
     itemsRaw.push(maxX);
     const items = itemsRaw.map((d) => { var _a; return (_a = lt(d)) !== null && _a !== void 0 ? _a : d; });
-    return (react_1.default.createElement(Base, null,
+    const ch = maxY.toString().length + 1;
+    return (react_1.default.createElement(Base, { style: { marginLeft: 'auto', width: `calc(100% - ${ch}ch)` } },
         react_1.default.createElement(Bar, null,
             react_1.default.createElement(Line, null),
             react_1.default.createElement(Numbers, null, items.map((i, i2) => (
@@ -99,4 +100,4 @@ const Legend = ({ data, lt, colours, }) => {
             react_1.default.createElement(Col, { style: { backgroundColor: k.colour } }),
             k.name)))))));
 };
-exports.Legend = Legend;
+exports.LegendX = LegendX;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ILineChartItemRaw } from './types';
+export declare const LegendY: ({ data }: {
+    data: ILineChartItemRaw[];
+}) => React.JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendY = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("react"));
+const Base = styled_1.default.div `
+  display: flex;
+  flex-flow: row;
+  width: 100%;
+`;
+const Numbers = styled_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  justify-content: space-between;
+  z-index: 1;
+  > span {
+    color: var(--main-fg);
+    background-color: var(--main-bg);
+    text-align: right;
+  }
+`;
+const LegendY = ({ data }) => {
+    const ys = data.map((a) => a.y);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const items = [minY];
+    const gc = 3;
+    const gap = (maxY - minY) / gc;
+    for (let a = 1; a < gc; a += 1) {
+        items.push(Math.floor(items[a - 1] + gap));
+    }
+    items.push(maxY);
+    const ch = maxY.toString().length;
+    return (react_1.default.createElement(Base, { style: { maxWidth: `${ch}ch`, paddingRight: '1ch' } },
+        react_1.default.createElement(Numbers, null, items.map((i, i2) => (
+        // eslint-disable-next-line react/no-array-index-key
+        react_1.default.createElement("span", { key: i + i2 }, i))))));
+};
+exports.LegendY = LegendY;

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

@@ -10,4 +10,7 @@ export interface ILegendItems {
     restTotal: number;
     total: number;
 }
-export declare const getLegendItems: (p: ILineChartTooltip) => ILegendItems;
+export declare const getLegendItems: (p: ILineChartTooltip & {
+    /** if true, will only return top items */
+    fixed: boolean;
+}) => ILegendItems;

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

@@ -3,17 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLegendItems = void 0;
 const array_1 = require("../../../common/helpers/array");
 const math_1 = require("../../../common/helpers/math");
+const shownResults = 4;
+const getTopItems = ({ data, colours, }) => {
+    const val = {};
+    data.forEach((d) => {
+        if (!val[d.name]) {
+            val[d.name] = { colour: colours[d.name], name: d.name, value: d.y };
+        }
+        else {
+            val[d.name].value += d.y;
+        }
+    });
+    const values = Object.values(val).sort((a, b) => a.value < b.value ? 1 : -1);
+    const legendItems = (0, array_1.take)(values, shownResults).part.map((v) => ({
+        colour: v.colour,
+        name: v.name,
+        y: v.value,
+        x: 0,
+    }));
+    return legendItems;
+};
 const getLegendItems = (p) => {
     var _a, _b;
-    const values = (_b = (_a = p.selectedXs) === null || _a === void 0 ? void 0 : _a.map((a) => ({
+    let values = (_b = (_a = p.selectedXs) === null || _a === void 0 ? void 0 : _a.map((a) => ({
         colour: p.colours[a.name],
         name: a.name,
         y: a.y,
         x: a.x,
     }))) !== null && _b !== void 0 ? _b : [];
+    if (p.fixed || values.length === 0) {
+        values = getTopItems(p);
+    }
     const total = (0, math_1.sumArray)(values.map((a) => a.y));
     const min = total * 0.1;
-    const shownResults = 4;
     let part = values.sort((a, b) => (a.y < b.y ? 1 : -1));
     let rest = [];
     if (part.length > shownResults) {

package/package.json

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