@techfides/ui-library-core 0.7.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CHART_EASING, chartAnimation } from "./animation.js";
|
|
2
2
|
import { chartTooltip, formatCallbackValue } from "./tooltip.js";
|
|
3
|
+
import { chartLegendDotClass } from "@techfides/ui-library-design";
|
|
3
4
|
//#region src/charts/groupedBars.ts
|
|
4
5
|
const GRID = {
|
|
5
6
|
bottom: 22,
|
|
@@ -11,7 +12,6 @@ const BAR_CATEGORY_GAP = "35%";
|
|
|
11
12
|
const LABEL_FONT_SIZE = 11;
|
|
12
13
|
const EMPTY_LENGTH = 0;
|
|
13
14
|
const FIRST_INDEX = 0;
|
|
14
|
-
const DOT_CLASS = "inline-block size-2 flex-none rounded-tf-pill";
|
|
15
15
|
const ROW_CLASS = "flex items-center justify-between gap-3";
|
|
16
16
|
const NAME_CLASS = "flex items-center gap-1.5";
|
|
17
17
|
const VALUE_CLASS = "font-semibold tabular-nums";
|
|
@@ -27,7 +27,7 @@ const colorOf = (point) => {
|
|
|
27
27
|
const groupedBarRow = (point, valueFormat) => {
|
|
28
28
|
const color = colorOf(point);
|
|
29
29
|
const name = formatCallbackValue(point.seriesName);
|
|
30
|
-
return `<div class="${ROW_CLASS}"><span class="${NAME_CLASS}"><span aria-hidden="true" class="${
|
|
30
|
+
return `<div class="${ROW_CLASS}"><span class="${NAME_CLASS}"><span aria-hidden="true" class="${chartLegendDotClass}" style="background:${color}"></span>${name}</span><span class="${VALUE_CLASS}">${formatValue(point.value, valueFormat)}</span></div>`;
|
|
31
31
|
};
|
|
32
32
|
const groupedBarsFormatter = (valueFormat) => (params) => {
|
|
33
33
|
const first = params[FIRST_INDEX];
|
package/dist/charts/spark.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BarsAccent } from "./bars.js";
|
|
2
|
-
import { EChartsOption } from "echarts";
|
|
3
2
|
import { StatSparkShape } from "@techfides/ui-library-design";
|
|
3
|
+
import { EChartsOption } from "echarts";
|
|
4
4
|
//#region src/charts/spark.d.ts
|
|
5
5
|
type SparkAccent = BarsAccent;
|
|
6
6
|
interface SparkOptionInput {
|
package/dist/charts/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { chartTooltipClass } from "@techfides/ui-library-design";
|
|
1
2
|
//#region src/charts/tooltip.ts
|
|
2
|
-
const TOOLTIP_CLASS = ["tf-edge-sweep tf-edge-plain rounded-tf-inline bg-tf-glass px-2 py-1", "font-tf-body text-tf-caption-sm text-tf-fg shadow-tf-float backdrop-blur-tf-glass"].join(" ");
|
|
3
3
|
const NO_CHROME_CSS = "box-shadow: none; pointer-events: none;";
|
|
4
4
|
const NO_CONTENT = "";
|
|
5
5
|
const SNAP_TO_CURSOR = 0;
|
|
@@ -23,7 +23,7 @@ const chartTooltip = (formatter, trigger = "item", axisPointer = DEFAULT_AXIS_PO
|
|
|
23
23
|
formatter: (raw) => {
|
|
24
24
|
const params = asParams(raw);
|
|
25
25
|
if (params.length === EMPTY_LENGTH) return NO_CONTENT;
|
|
26
|
-
return `<div class="${
|
|
26
|
+
return `<div class="${chartTooltipClass}">${formatter(params)}</div>`;
|
|
27
27
|
},
|
|
28
28
|
padding: 0,
|
|
29
29
|
transitionDuration: SNAP_TO_CURSOR,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@techfides/ui-library-core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Framework-agnostic logic for the TechFides UI library: words and languages, number tallies, chart options, field state and shared DOM maths",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@tanstack/hotkeys": "^0.8.0",
|
|
36
|
-
"@techfides/ui-library-design": "^0.
|
|
36
|
+
"@techfides/ui-library-design": "^0.9.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@arethetypeswrong/core": "^0.18.5",
|