ag-common 0.0.650 → 0.0.652

package/dist/ui/components/BarChart/Base.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { type IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const BarChart: ({ data: dataRaw }: {
+export declare const BarChart: ({ data: dataRaw, style: sRaw, }: {
     data: IBarChartData[];
+    style?: Partial<IVarStyles>;
 }) => React.JSX.Element;

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

@@ -7,6 +7,7 @@ exports.BarChart = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const useTooltip_1 = require("../../helpers/useTooltip");
+const common_1 = require("../../styles/common");
 const Item_1 = require("./Item");
 const Legend_1 = require("./Legend");
 const TooltipContent_1 = require("./TooltipContent");
@@ -17,7 +18,6 @@ const BarChartBase = styled_1.default.div `
   height: 100%;
   margin-top: 0.5rem;
   position: relative;
-  background-color: var(--main-bg);
 `;
 const ItemStyled = (0, styled_1.default)(Item_1.Item) `
   margin-bottom: 0.75rem;
@@ -26,21 +26,22 @@ const ItemStyled = (0, styled_1.default)(Item_1.Item) `
     margin-bottom: 0;
   }
 `;
-const BarChart = ({ data: dataRaw }) => {
+const BarChart = ({ data: dataRaw, style: sRaw, }) => {
+    const style = (0, common_1.getVarStyles)(sRaw);
     const UT = (0, useTooltip_1.useTooltip)();
     const maxWidth = Math.max(...dataRaw.map((a) => a.total));
-    return (react_1.default.createElement(BarChartBase, { "data-type": "bcb" },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p))),
-        dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
+    return (react_1.default.createElement(BarChartBase, { "data-type": "bcb", style: style },
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p, { style: style }))),
+        dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { style: style, key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
                 var _a, _b;
                 const selectedKey = (_b = (_a = document
                     .elementFromPoint(element.pageX, element.pageY)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-barchartitem-key')) !== null && _b !== void 0 ? _b : '';
                 UT.setPos({
                     element,
                     parent: element.currentTarget.closest("[data-type='bcb']"),
-                    data: { data, selectedKey },
+                    data: { selectedKey, data },
                 });
             } }))),
-        react_1.default.createElement(Legend_1.Legend, { data: dataRaw, maxWidth: maxWidth })));
+        react_1.default.createElement(Legend_1.Legend, { data: dataRaw, maxWidth: maxWidth, style: style })));
 };
 exports.BarChart = BarChart;

package/dist/ui/components/BarChart/Item.d.ts

@@ -1,10 +1,12 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
+import type { IVarStyles } from '../../styles';
 import type { IBarChartData } from './types';
-export declare const Item: ({ data, className, onMouseMove, onMouseLeave, maxWidth, }: {
+export declare const Item: ({ data, className, onMouseMove, onMouseLeave, maxWidth, style, }: {
     data: IBarChartData;
     className?: string | undefined;
     onMouseMove?: MouseEventHandler<HTMLDivElement> | undefined;
     onMouseLeave?: MouseEventHandler<HTMLDivElement> | undefined;
     maxWidth: number;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/Item.js

@@ -18,11 +18,12 @@ const Base = styled_1.default.div `
 const Title = styled_1.default.div `
   position: absolute;
   left: 0.25rem;
-  color: var(--main-fg);
-  ${(0, styles_1.HardOutline)('var(--main-bg)')};
 `;
-const Item = ({ data, className, onMouseMove, onMouseLeave, maxWidth, }) => (react_1.default.createElement(Base, { className: className, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave },
-    react_1.default.createElement(Title, null, data.name),
+const Item = ({ data, className, onMouseMove, onMouseLeave, maxWidth, style, }) => (react_1.default.createElement(Base, { className: className, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, style: style },
+    react_1.default.createElement(Title, { style: {
+            color: style.color,
+            filter: (0, styles_1.HardOutlineFilter)(style.backgroundColor),
+        } }, data.name),
     data.values.map((v) => (react_1.default.createElement("div", { "data-barchartitem-key": v.name, key: v.name, style: {
             height: '100%',
             width: `${(v.value / maxWidth) * 100}%`,

package/dist/ui/components/BarChart/Legend.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const Legend: ({ data, maxWidth, }: {
+export declare const Legend: ({ data, maxWidth, style, }: {
     data: IBarChartData[];
     maxWidth: number;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/Legend.js

@@ -26,7 +26,6 @@ const Line = styled_1.default.div `
   height: 2px;
   left: 0;
   right: 0;
-  background-color: var(--main-fg);
 `;
 const Numbers = styled_1.default.div `
   width: 100%;
@@ -35,9 +34,6 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
-  > span {
-    background-color: var(--main-bg);
-  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -59,7 +55,7 @@ const Col = styled_1.default.div `
   border-radius: 50%;
   margin-right: 0.25rem;
 `;
-const Legend = ({ data, maxWidth, }) => {
+const Legend = ({ data, maxWidth, style, }) => {
     const items = [0];
     if (maxWidth > 10) {
         items.push(Math.floor(maxWidth * 0.25));
@@ -73,10 +69,13 @@ const Legend = ({ data, maxWidth, }) => {
             name: v.name,
         }));
     })), (s) => s.name).sort((a, b) => (a.name < b.name ? -1 : 1));
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: style },
         react_1.default.createElement(Bar, null,
-            react_1.default.createElement(Line, null),
-            react_1.default.createElement(Numbers, null, items.map((i) => (react_1.default.createElement("span", { key: i }, i))))),
+            react_1.default.createElement(Line, { style: { background: style.backgroundColor, color: style.color } }),
+            react_1.default.createElement(Numbers, null, items.map((i) => (react_1.default.createElement("span", { style: {
+                    backgroundColor: style.backgroundColor,
+                    color: style.color,
+                }, key: i }, i))))),
         keys.length > 1 && (react_1.default.createElement(Items, null, keys.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/BarChart/TooltipContent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { IBarChartData } from './types';
-export declare const TooltipContent: ({ data, selectedKey, }: {
+export declare const TooltipContent: ({ data, selectedKey, style, }: {
     data: IBarChartData;
     selectedKey?: string | undefined;
+    style: IVarStyles;
 }) => React.JSX.Element;

package/dist/ui/components/BarChart/TooltipContent.js

@@ -8,8 +8,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const getLegendItems_1 = require("./getLegendItems");
 const Base = styled_1.default.div `
-  background-color: var(--main-bg);
-  border: solid 1px var(--main-bg-mid);
   padding: 0.5rem;
 `;
 const Title = styled_1.default.div `
@@ -34,9 +32,9 @@ const Total = styled_1.default.span `
     text-decoration: underline;
   }
 `;
-const TooltipContent = ({ data, selectedKey, }) => {
+const TooltipContent = ({ data, selectedKey, style, }) => {
     const { part, rest, restTotal } = (0, getLegendItems_1.getLegendItems)({ data, selectedKey });
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { border: `solid 1px ${style.borderColor}` }) },
         react_1.default.createElement(Title, null, data.name),
         react_1.default.createElement(Row, null,
             react_1.default.createElement("span", null, "total"),

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

@@ -10,15 +10,19 @@ 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 common_1 = require("../../styles/common");
+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,9 +30,15 @@ const Base = styled_1.default.div `
   overflow: hidden;
   position: relative;
 `;
+const Svg = styled_1.default.svg `
+  padding: 2px;
+  width: calc(100% - 5px);
+  height: calc(100% - 5px);
+`;
 const LineChart = (p) => {
     var _a;
     const UT = (0, useTooltip_1.useTooltip)();
+    const style = (0, common_1.getVarStyles)(p.style);
     const { points, xTime } = (0, interpolate_1.interpolate)(p.data);
     let tt = p.tooltipTitle;
     if (!tt && xTime) {
@@ -47,49 +57,53 @@ const LineChart = (p) => {
     const lt2 = lt;
     const tt2 = tt;
     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 }));
-    return (react_1.default.createElement(Base, { className: p.className, "data-type": "lcb", onMouseLeave: () => UT.setPos(undefined) },
+    const SvgC = (react_1.default.createElement(Svg, { style: {
+            borderLeft: `solid 1px ${style.borderColor}`,
+            borderTop: `solid 1px ${style.borderColor}`,
+        }, 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), 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 })))),
-        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, tt: tt })));
+        react_1.default.createElement(FlexRow_1.FlexRow, { noWrap: true },
+            react_1.default.createElement(LegendY_1.LegendY, { data: p.data, style: style }),
+            SvgC),
+        react_1.default.createElement(LegendX_1.LegendX, { data: p.data, colours: p.colours, lt: lt, tt: tt, style: style })));
 };
 exports.LineChart = LineChart;

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

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

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

@@ -3,7 +3,7 @@ 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");
@@ -26,7 +26,6 @@ const Line = styled_1.default.div `
   height: 2px;
   left: 0;
   right: 0;
-  background-color: var(--main-fg);
 `;
 const Numbers = styled_1.default.div `
   width: 100%;
@@ -34,9 +33,6 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
-  > span {
-    background-color: var(--main-bg);
-  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -44,13 +40,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,7 +60,7 @@ const Col = styled_1.default.div `
   border-radius: 50%;
   margin-right: 0.25rem;
 `;
-const Legend = ({ data, lt, tt, colours, }) => {
+const LegendX = ({ data, lt, tt, colours, style, }) => {
     const legendItems = (0, getLegendItems_1.getLegendItems)({
         data,
         colours,
@@ -67,25 +69,29 @@ const Legend = ({ data, lt, tt, colours, }) => {
         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: Object.assign(Object.assign({}, 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) => (
-            // eslint-disable-next-line react/no-array-index-key
-            react_1.default.createElement("span", { key: i + i2 }, i))))),
+            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))))),
         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)))))));
 };
-exports.Legend = Legend;
+exports.LegendX = LegendX;

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

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

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

@@ -0,0 +1,44 @@
+"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 {
+    text-align: right;
+  }
+`;
+const LegendY = ({ data, style, }) => {
+    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: Object.assign(Object.assign({}, style), { maxWidth: `${ch}ch`, paddingRight: '1ch' }) },
+        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: {
+                color: style.color,
+                backgroundColor: style.backgroundColor,
+            } }, i))))));
+};
+exports.LegendY = LegendY;

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { IVarStyles } from '../../styles/common';
 import type { ILegendItems } from './getLegendItems';
 import type { ILineChartTooltip } from './types';
 export declare const TooltipContent: (p: ILineChartTooltip & {
     legendItems: ILegendItems;
-}) => React.JSX.Element;
+}, style: IVarStyles) => React.JSX.Element;

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

@@ -7,8 +7,6 @@ exports.TooltipContent = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const Base = styled_1.default.div `
-  background-color: var(--main-bg);
-  border: solid 1px var(--main-bg-mid);
   padding: 0.5rem;
 `;
 const Title = styled_1.default.div `
@@ -33,10 +31,10 @@ const Total = styled_1.default.span `
     text-decoration: underline;
   }
 `;
-const TooltipContent = (p) => {
+const TooltipContent = (p, style) => {
     var _a, _b, _c, _d;
     const name = (_d = (_a = p.tt) === null || _a === void 0 ? void 0 : _a.call(p, (_c = (_b = p.selectedXs) === null || _b === void 0 ? void 0 : _b[0].x) !== null && _c !== void 0 ? _c : 0)) !== null && _d !== void 0 ? _d : '';
-    return (react_1.default.createElement(Base, null,
+    return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { border: `solid 1px ${style.borderColor}` }) },
         react_1.default.createElement(Title, null, name),
         react_1.default.createElement(Row, null,
             react_1.default.createElement("span", null, "total"),

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

@@ -1,3 +1,4 @@
+import type { IVarStyles } from '../../styles/common';
 export type ILineChartItemRaw = {
     x: number;
     y: number;
@@ -23,4 +24,5 @@ export interface ILineChart {
     colours: Record<string, string>;
     tooltipTitle?: (a: number) => string;
     legendTitle?: (a: number) => string;
+    style: Partial<IVarStyles>;
 }

package/dist/ui/icons/Checkmark.js

@@ -7,7 +7,7 @@ exports.Checkmark = void 0;
 const react_1 = __importDefault(require("react"));
 const Checkmark = ({ style, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 12.333 10.461 15 16 9m5 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Checkmark = Checkmark;

package/dist/ui/icons/Circle.js

@@ -7,7 +7,7 @@ exports.Circle = void 0;
 const react_1 = __importDefault(require("react"));
 const Circle = ({ style, dotted = false, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "2 2 20 20", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : '#000', strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: !dotted ? '' : '4 4', strokeWidth: "2", d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })));
 };
 exports.Circle = Circle;

package/dist/ui/icons/Computer.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Computer = void 0;
 const react_1 = __importDefault(require("react"));
-const Computer = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", style: Object.assign({}, style) },
+const Computer = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", style: style },
     react_1.default.createElement("path", { fillRule: "evenodd", d: "M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-6v1h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-1H5a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5Z", clipRule: "evenodd" })));
 exports.Computer = Computer;

package/dist/ui/icons/Magnify.js

@@ -7,7 +7,7 @@ exports.Magnify = void 0;
 const react_1 = __importDefault(require("react"));
 const Magnify = ({ style, }) => {
     var _a;
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490", style: Object.assign({}, style) },
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490", style: style },
         react_1.default.createElement("path", { fill: "none", stroke: (_a = style === null || style === void 0 ? void 0 : style.fill) !== null && _a !== void 0 ? _a : 'black', strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
 };
 exports.Magnify = Magnify;

package/dist/ui/icons/Moon.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Moon = void 0;
 const react_1 = __importDefault(require("react"));
-const Moon = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 35 35", style: Object.assign({}, style) },
+const Moon = ({ style, }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 35 35", style: style },
     react_1.default.createElement("path", { d: "M18.44 34.68a18.22 18.22 0 0 1-2.94-.24 18.18 18.18 0 0 1-15-20.86A18.06 18.06 0 0 1 9.59.63a2.42 2.42 0 0 1 2.61.16 2.39 2.39 0 0 1 1 2.41l-1.3-.1 1.23.22A15.66 15.66 0 0 0 23.34 21a15.82 15.82 0 0 0 8.47.53A2.44 2.44 0 0 1 34.47 25a18.18 18.18 0 0 1-16.03 9.68ZM10.67 2.89a15.67 15.67 0 0 0-5 22.77A15.66 15.66 0 0 0 32.18 24a18.49 18.49 0 0 1-9.65-.64A18.18 18.18 0 0 1 10.67 2.89Z" })));
 exports.Moon = Moon;

package/dist/ui/styles/common.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { CSSProperties } from 'react';
 /** function that returns css that gives a text outline drop shadow.
  * @param outlineColour default='white'
  * @param sizePx default = 1px
@@ -23,3 +23,12 @@ export declare const Card: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface IVarStyles {
+    /** default var(--main-fg) */
+    color: string;
+    /** default var(--main-bg) */
+    backgroundColor: string;
+    /** default var(--main-bg-mid) */
+    borderColor: string;
+}
+export declare const getVarStyles: (raw?: Partial<IVarStyles & CSSProperties>) => IVarStyles;

package/dist/ui/styles/common.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = exports.bounce = exports.noDrag = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutlineFilter = exports.HardOutline = void 0;
+exports.getVarStyles = exports.Card = exports.bounce = exports.noDrag = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutlineFilter = exports.HardOutline = void 0;
 const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const colours_1 = require("./colours");
@@ -77,3 +77,8 @@ exports.Card = styled_1.default.div `
   padding: 1rem;
   border: solid 2px ${colours_1.colours.lighter};
 `;
+const getVarStyles = (raw) => {
+    var _a, _b, _c;
+    return (Object.assign(Object.assign({}, raw), { color: (_a = raw === null || raw === void 0 ? void 0 : raw.color) !== null && _a !== void 0 ? _a : 'var(--main-fg)', backgroundColor: (_b = raw === null || raw === void 0 ? void 0 : raw.backgroundColor) !== null && _b !== void 0 ? _b : 'var(--main-bg)', borderColor: (_c = raw === null || raw === void 0 ? void 0 : raw.borderColor) !== null && _c !== void 0 ? _c : 'var(--main-bg-mid)' }));
+};
+exports.getVarStyles = getVarStyles;

package/package.json

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