@graphenedata/cli 0.0.14 → 0.0.16
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.
- package/LICENSE.md +3 -3
- package/README.md +138 -0
- package/THIRD_PARTY_NOTICES.md +1 -0
- package/bin.js +2 -2
- package/dist/cli/bigQuery-I3F46SC6.js +75 -0
- package/dist/cli/bigQuery-I3F46SC6.js.map +7 -0
- package/dist/cli/chunk-OVWODUTJ.js +12849 -0
- package/dist/cli/chunk-OVWODUTJ.js.map +7 -0
- package/dist/cli/chunk-QAXEOZ43.js +53 -0
- package/dist/cli/chunk-QAXEOZ43.js.map +7 -0
- package/dist/cli/cli.js +245 -10290
- package/dist/cli/clickhouse-ZN5AN2UL.js +64 -0
- package/dist/cli/clickhouse-ZN5AN2UL.js.map +7 -0
- package/dist/cli/duckdb-IYBIO5KJ.js +87 -0
- package/dist/cli/duckdb-IYBIO5KJ.js.map +7 -0
- package/dist/cli/serve2-TNN5EROW.js +447 -0
- package/dist/cli/serve2-TNN5EROW.js.map +7 -0
- package/dist/cli/snowflake-MOQB5GA4.js +128 -0
- package/dist/cli/snowflake-MOQB5GA4.js.map +7 -0
- package/dist/index.d.ts +63 -0
- package/dist/lang/index.d.ts +63 -0
- package/dist/skills/graphene/SKILL.md +235 -0
- package/dist/skills/graphene/references/big-value.md +20 -0
- package/dist/skills/graphene/references/date-range.md +64 -0
- package/dist/skills/graphene/references/dropdown.md +62 -0
- package/dist/skills/graphene/references/echarts.md +162 -0
- package/dist/skills/graphene/references/gsql.md +393 -0
- package/dist/skills/graphene/references/model-gsql.md +72 -0
- package/dist/skills/graphene/references/table.md +143 -0
- package/dist/skills/graphene/references/text-input.md +29 -0
- package/dist/ui/app.css +263 -299
- package/dist/ui/component-utilities/dataShaping.ts +484 -0
- package/dist/ui/component-utilities/dataSummary.ts +57 -0
- package/dist/ui/component-utilities/enrich.ts +763 -0
- package/dist/ui/component-utilities/format.ts +177 -0
- package/dist/ui/component-utilities/inputUtils.ts +48 -9
- package/dist/ui/component-utilities/theme.ts +200 -0
- package/dist/ui/component-utilities/themeStores.ts +26 -21
- package/dist/ui/component-utilities/types.ts +70 -0
- package/dist/ui/components/AreaChart.svelte +57 -105
- package/dist/ui/components/BarChart.svelte +71 -129
- package/dist/ui/components/BigValue.svelte +24 -40
- package/dist/ui/components/Column.svelte +11 -19
- package/dist/ui/components/DateRange.svelte +71 -34
- package/dist/ui/components/Dropdown.svelte +82 -49
- package/dist/ui/components/DropdownOption.svelte +1 -2
- package/dist/ui/components/ECharts.svelte +179 -60
- package/dist/ui/components/InlineDelta.svelte +51 -32
- package/dist/ui/components/LineChart.svelte +54 -125
- package/dist/ui/components/PieChart.svelte +27 -37
- package/dist/ui/components/QueryLoad.svelte +78 -44
- package/dist/ui/components/Row.svelte +2 -1
- package/dist/ui/components/ScatterPlot.svelte +52 -0
- package/dist/ui/components/Skeleton.svelte +32 -0
- package/dist/ui/components/Table.svelte +3 -2
- package/dist/ui/components/TableGroupRow.svelte +28 -36
- package/dist/ui/components/TableHarness.svelte +32 -0
- package/dist/ui/components/TableHeader.svelte +34 -59
- package/dist/ui/components/TableRow.svelte +15 -39
- package/dist/ui/components/TableSubtotalRow.svelte +26 -21
- package/dist/ui/components/TableTotalRow.svelte +27 -37
- package/dist/ui/components/TextInput.svelte +17 -14
- package/dist/ui/components/Value.svelte +25 -0
- package/dist/ui/components/_Table.svelte +80 -76
- package/dist/ui/internal/ChartGallery.svelte +527 -0
- package/dist/ui/internal/ErrorDisplay.svelte +60 -0
- package/dist/ui/internal/LocalApp.svelte +87 -19
- package/dist/ui/internal/PageNavGroup.svelte +269 -0
- package/dist/ui/internal/Sidebar.svelte +178 -0
- package/dist/ui/internal/SidebarToggle.svelte +47 -0
- package/dist/ui/internal/StyleGallery.svelte +244 -0
- package/dist/ui/internal/clientCache.ts +15 -13
- package/dist/ui/internal/pageInputs.svelte.js +292 -0
- package/dist/ui/internal/queryEngine.ts +124 -132
- package/dist/ui/internal/runSocket.ts +59 -0
- package/dist/ui/internal/sidebar.svelte.js +18 -0
- package/dist/ui/internal/telemetry.ts +52 -17
- package/dist/ui/internal/types.d.ts +7 -0
- package/dist/ui/web.js +55 -13
- package/package.json +40 -41
- package/dist/docs/agent-instructions.md +0 -18
- package/dist/docs/base.md +0 -98
- package/dist/docs/cli.md +0 -22
- package/dist/docs/graphene.md +0 -1462
- package/dist/ui/component-utilities/autoFormatting.js +0 -301
- package/dist/ui/component-utilities/builtInFormats.js +0 -482
- package/dist/ui/component-utilities/chartContext.js +0 -12
- package/dist/ui/component-utilities/chartWindowDebug.js +0 -21
- package/dist/ui/component-utilities/checkInputs.js +0 -95
- package/dist/ui/component-utilities/convert.js +0 -15
- package/dist/ui/component-utilities/dateParsing.js +0 -57
- package/dist/ui/component-utilities/dropdownContext.ts +0 -1
- package/dist/ui/component-utilities/echarts.js +0 -272
- package/dist/ui/component-utilities/echartsThemes.js +0 -453
- package/dist/ui/component-utilities/formatTitle.js +0 -24
- package/dist/ui/component-utilities/formatting.js +0 -250
- package/dist/ui/component-utilities/getColumnExtents.js +0 -79
- package/dist/ui/component-utilities/getColumnSummary.js +0 -67
- package/dist/ui/component-utilities/getCompletedData.js +0 -114
- package/dist/ui/component-utilities/getDistinctCount.js +0 -7
- package/dist/ui/component-utilities/getDistinctValues.js +0 -15
- package/dist/ui/component-utilities/getSeriesConfig.js +0 -237
- package/dist/ui/component-utilities/getSortedData.js +0 -7
- package/dist/ui/component-utilities/getStackPercentages.js +0 -43
- package/dist/ui/component-utilities/getStackedData.js +0 -17
- package/dist/ui/component-utilities/getYAxisIndex.js +0 -15
- package/dist/ui/component-utilities/globalContexts.js +0 -1
- package/dist/ui/component-utilities/helpers/getCompletedData.helpers.js +0 -119
- package/dist/ui/component-utilities/replaceNulls.js +0 -14
- package/dist/ui/component-utilities/tableUtils.ts +0 -120
- package/dist/ui/components/Area.svelte +0 -214
- package/dist/ui/components/Bar.svelte +0 -350
- package/dist/ui/components/Chart.svelte +0 -989
- package/dist/ui/components/ErrorChart.svelte +0 -118
- package/dist/ui/components/Line.svelte +0 -227
- package/dist/ui/internal/NavSidebar.svelte +0 -396
- package/dist/ui/internal/PageError.svelte +0 -23
- package/dist/ui/internal/checkSocket.ts +0 -48
- package/dist/ui/internal/theme.ts +0 -88
- package/dist/ui/public/inter-latin-ext.woff2 +0 -0
- package/dist/ui/public/inter-latin.woff2 +0 -0
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {getContext} from 'svelte'
|
|
3
|
-
import type {Writable} from 'svelte/store'
|
|
4
|
-
import {propKey, configKey} from '../component-utilities/chartContext.js'
|
|
5
|
-
import getSeriesConfig from '../component-utilities/getSeriesConfig.js'
|
|
6
|
-
import formatTitle from '../component-utilities/formatTitle.js'
|
|
7
|
-
import replaceNulls from '../component-utilities/replaceNulls.js'
|
|
8
|
-
import getCompletedData from '../component-utilities/getCompletedData.js'
|
|
9
|
-
import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
|
|
10
|
-
import {getThemeStores} from '../component-utilities/themeStores'
|
|
11
|
-
import {parseCommaList} from '../component-utilities/inputUtils.ts'
|
|
12
|
-
|
|
13
|
-
interface Props {
|
|
14
|
-
y?: any, series?: any, options?: any, name?: any, type?: string, fillColor?: any, lineColor?: any
|
|
15
|
-
fillOpacity?: any, line?: boolean | string, markers?: boolean | string, markerShape?: string
|
|
16
|
-
markerSize?: number, handleMissing?: string, step?: boolean | string, stepPosition?: string
|
|
17
|
-
labels?: boolean | string, labelSize?: number, labelPosition?: string, labelColor?: any
|
|
18
|
-
labelFmt?: any, showAllLabels?: boolean | string, seriesOrder?: any, seriesLabelFmt?: any
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const {resolveColor} = getThemeStores()
|
|
22
|
-
const chartProps: Writable<any> = getContext(propKey)
|
|
23
|
-
const config: Writable<any> = getContext(configKey)
|
|
24
|
-
|
|
25
|
-
let {
|
|
26
|
-
y = undefined, series = undefined, options = undefined, name = undefined, type = 'stacked',
|
|
27
|
-
fillColor = undefined, lineColor = undefined, fillOpacity = undefined, line = true, markers = false,
|
|
28
|
-
markerShape = 'circle', markerSize = 8, handleMissing = 'gap', step = false, stepPosition = 'end',
|
|
29
|
-
labels = false, labelSize = 11, labelPosition = 'top', labelColor = undefined, labelFmt = undefined,
|
|
30
|
-
showAllLabels = false, seriesOrder = undefined, seriesLabelFmt = undefined,
|
|
31
|
-
}: Props = $props()
|
|
32
|
-
|
|
33
|
-
// Use $derived for values that depend on props
|
|
34
|
-
let ySet = $derived(y ? true : false)
|
|
35
|
-
let seriesSet = $derived(series ? true : false)
|
|
36
|
-
|
|
37
|
-
let fillColorStore = $derived(resolveColor(fillColor))
|
|
38
|
-
let lineColorStore = $derived(resolveColor(lineColor))
|
|
39
|
-
let lineBool = $derived(line === 'true' || line === true)
|
|
40
|
-
let markersBool = $derived(markers === 'true' || markers === true)
|
|
41
|
-
let stepBool = $derived(step === 'true' || step === true)
|
|
42
|
-
let labelsBool = $derived(labels === 'true' || labels === true)
|
|
43
|
-
let labelColorStore = $derived(resolveColor(labelColor))
|
|
44
|
-
|
|
45
|
-
// Format objects derived from props
|
|
46
|
-
let labelFormat = $derived(labelFmt ? getFormatObjectFromString(labelFmt) : undefined)
|
|
47
|
-
|
|
48
|
-
const labelPositions = {above: 'top', below: 'bottom', middle: 'inside'}
|
|
49
|
-
const swapXYLabelPositions = {above: 'right', below: 'left', middle: 'inside'}
|
|
50
|
-
|
|
51
|
-
// Derive values from chartProps store instead of using $effect to assign
|
|
52
|
-
let data = $derived($chartProps.data)
|
|
53
|
-
let x = $derived($chartProps.x)
|
|
54
|
-
let swapXY = $derived($chartProps.swapXY)
|
|
55
|
-
let yFormat = $derived($chartProps.yFormat)
|
|
56
|
-
let baseXType = $derived($chartProps.xType)
|
|
57
|
-
let xMismatch = $derived($chartProps.xMismatch)
|
|
58
|
-
let columnSummary = $derived($chartProps.columnSummary)
|
|
59
|
-
let resolvedSeries = $derived(seriesSet ? series : $chartProps.series)
|
|
60
|
-
let resolvedY = $derived(ySet ? parseCommaList(y) : $chartProps.y)
|
|
61
|
-
let resolvedSeriesOrder = $derived(parseCommaList(seriesOrder))
|
|
62
|
-
|
|
63
|
-
// Compute all the derived state in one $derived.by block to avoid read/write conflicts
|
|
64
|
-
let computedState = $derived.by(() => {
|
|
65
|
-
let isSingleSeries = !resolvedSeries && (!Array.isArray(resolvedY) || resolvedY.length === 1)
|
|
66
|
-
let computedData = data
|
|
67
|
-
let computedXType = baseXType
|
|
68
|
-
let computedName = name
|
|
69
|
-
let computedStackName: string | undefined = undefined
|
|
70
|
-
let computedDefaultLabelPosition = swapXY ? 'right' : 'top'
|
|
71
|
-
|
|
72
|
-
if (!data || !columnSummary) {
|
|
73
|
-
return {
|
|
74
|
-
data: computedData,
|
|
75
|
-
xType: computedXType,
|
|
76
|
-
name: computedName,
|
|
77
|
-
stackName: computedStackName,
|
|
78
|
-
defaultLabelPosition: computedDefaultLabelPosition,
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
if (isSingleSeries) {
|
|
83
|
-
// Single Series
|
|
84
|
-
let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
|
|
85
|
-
if (col && columnSummary[col]) {
|
|
86
|
-
computedName = computedName ?? formatTitle(col, columnSummary[col].title)
|
|
87
|
-
}
|
|
88
|
-
} else {
|
|
89
|
-
// Multi Series
|
|
90
|
-
computedStackName = 'area'
|
|
91
|
-
computedData = getCompletedData(computedData, x, resolvedY, resolvedSeries, false, computedXType === 'value')
|
|
92
|
-
computedData = replaceNulls(computedData, resolvedY)
|
|
93
|
-
computedXType = computedXType === 'value' ? 'category' : computedXType
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// Handle missing values
|
|
97
|
-
if (handleMissing === 'zero') {
|
|
98
|
-
computedData = replaceNulls(computedData, resolvedY)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return {
|
|
102
|
-
data: computedData,
|
|
103
|
-
xType: computedXType,
|
|
104
|
-
name: computedName,
|
|
105
|
-
stackName: computedStackName,
|
|
106
|
-
defaultLabelPosition: computedDefaultLabelPosition,
|
|
107
|
-
}
|
|
108
|
-
})
|
|
109
|
-
|
|
110
|
-
// Extract computed values for use in template and other derived values
|
|
111
|
-
let processedData = $derived(computedState.data)
|
|
112
|
-
let xType = $derived(computedState.xType)
|
|
113
|
-
let resolvedName = $derived(computedState.name)
|
|
114
|
-
let resolvedStackName = $derived(computedState.stackName)
|
|
115
|
-
let defaultLabelPosition = $derived(computedState.defaultLabelPosition)
|
|
116
|
-
|
|
117
|
-
let resolvedLabelPosition = $derived(
|
|
118
|
-
(swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition,
|
|
119
|
-
)
|
|
120
|
-
|
|
121
|
-
let chartOverrides = $derived({
|
|
122
|
-
yAxis: {boundaryGap: ['0%', '1%']},
|
|
123
|
-
xAxis: {boundaryGap: ['4%', '4%'], type: xType},
|
|
124
|
-
})
|
|
125
|
-
|
|
126
|
-
$effect(() => {
|
|
127
|
-
// Don't run until we have data
|
|
128
|
-
if (!processedData || !columnSummary) return
|
|
129
|
-
|
|
130
|
-
let baseConfig = {
|
|
131
|
-
type: 'line',
|
|
132
|
-
stack: resolvedStackName,
|
|
133
|
-
areaStyle: {color: $fillColorStore, opacity: fillOpacity},
|
|
134
|
-
connectNulls: handleMissing === 'connect',
|
|
135
|
-
lineStyle: {width: lineBool ? 1 : 0, color: $lineColorStore},
|
|
136
|
-
label: {
|
|
137
|
-
show: labelsBool,
|
|
138
|
-
formatter: (params: any) =>
|
|
139
|
-
params.value[swapXY ? 0 : 1] === 0
|
|
140
|
-
? ''
|
|
141
|
-
: formatValue(params.value[swapXY ? 0 : 1], labelFormat ?? yFormat),
|
|
142
|
-
fontSize: labelSize,
|
|
143
|
-
color: $labelColorStore,
|
|
144
|
-
position: resolvedLabelPosition,
|
|
145
|
-
padding: 3,
|
|
146
|
-
},
|
|
147
|
-
labelLayout: {hideOverlap: showAllLabels ? false : true},
|
|
148
|
-
emphasis: {focus: 'series'},
|
|
149
|
-
showSymbol: labelsBool || markersBool,
|
|
150
|
-
symbol: markerShape,
|
|
151
|
-
symbolSize: labelsBool && !markersBool ? 0 : markerSize,
|
|
152
|
-
step: stepBool ? stepPosition : false,
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
let seriesConfig = getSeriesConfig(
|
|
156
|
-
processedData,
|
|
157
|
-
x,
|
|
158
|
-
resolvedY,
|
|
159
|
-
resolvedSeries,
|
|
160
|
-
swapXY,
|
|
161
|
-
baseConfig,
|
|
162
|
-
resolvedName,
|
|
163
|
-
xMismatch,
|
|
164
|
-
columnSummary,
|
|
165
|
-
resolvedSeriesOrder,
|
|
166
|
-
undefined,
|
|
167
|
-
undefined,
|
|
168
|
-
undefined,
|
|
169
|
-
seriesLabelFmt,
|
|
170
|
-
)
|
|
171
|
-
|
|
172
|
-
config.update((d: any) => {
|
|
173
|
-
// Guard against incomplete config state
|
|
174
|
-
if (!d.series) d.series = []
|
|
175
|
-
if (!d.legend) d.legend = {data: []}
|
|
176
|
-
if (!d.legend.data) d.legend.data = []
|
|
177
|
-
|
|
178
|
-
d.series.push(...seriesConfig)
|
|
179
|
-
d.legend.data.push(...seriesConfig.map((entry: any) => entry.name.toString()))
|
|
180
|
-
return d
|
|
181
|
-
})
|
|
182
|
-
})
|
|
183
|
-
|
|
184
|
-
// Use $effect.pre() instead of beforeUpdate for runes mode
|
|
185
|
-
$effect.pre(() => {
|
|
186
|
-
if (options) {
|
|
187
|
-
config.update((d: any) => ({...d, ...options}))
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
if (chartOverrides) {
|
|
191
|
-
config.update((d: any) => {
|
|
192
|
-
// Guard against incomplete config state
|
|
193
|
-
if (!d.yAxis || !Array.isArray(d.yAxis)) return d
|
|
194
|
-
|
|
195
|
-
d.tooltip = {...d.tooltip, order: 'seriesDesc'}
|
|
196
|
-
if (swapXY) {
|
|
197
|
-
d.yAxis = {...d.yAxis, ...chartOverrides.xAxis}
|
|
198
|
-
d.xAxis = {...d.xAxis, ...chartOverrides.yAxis}
|
|
199
|
-
} else {
|
|
200
|
-
if (d.yAxis[0]) {
|
|
201
|
-
d.yAxis[0] = {...d.yAxis[0], ...chartOverrides.yAxis}
|
|
202
|
-
}
|
|
203
|
-
d.xAxis = {...d.xAxis, ...chartOverrides.xAxis}
|
|
204
|
-
}
|
|
205
|
-
if (type === 'stacked100') {
|
|
206
|
-
if (swapXY) d.xAxis = {...d.xAxis, max: 1}
|
|
207
|
-
else if (d.yAxis[0]) d.yAxis[0] = {...d.yAxis[0], max: 1}
|
|
208
|
-
}
|
|
209
|
-
if (labelsBool) d.axisPointer = {triggerEmphasis: false}
|
|
210
|
-
return d
|
|
211
|
-
})
|
|
212
|
-
}
|
|
213
|
-
})
|
|
214
|
-
</script>
|
|
@@ -1,350 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {getContext} from 'svelte'
|
|
3
|
-
import {propKey, configKey} from '../component-utilities/chartContext.js'
|
|
4
|
-
import type {Writable} from 'svelte/store'
|
|
5
|
-
import getSeriesConfig from '../component-utilities/getSeriesConfig.js'
|
|
6
|
-
import getStackedData from '../component-utilities/getStackedData.js'
|
|
7
|
-
import getSortedData from '../component-utilities/getSortedData.js'
|
|
8
|
-
import formatTitle from '../component-utilities/formatTitle.js'
|
|
9
|
-
import getCompletedData from '../component-utilities/getCompletedData.js'
|
|
10
|
-
import getYAxisIndex from '../component-utilities/getYAxisIndex.js'
|
|
11
|
-
import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
|
|
12
|
-
import {getThemeStores} from '../component-utilities/themeStores'
|
|
13
|
-
import {parseCommaList} from '../component-utilities/inputUtils.ts'
|
|
14
|
-
|
|
15
|
-
interface Props {
|
|
16
|
-
y?: any, y2?: any, series?: any, options?: any, name?: any, type?: string, stackName?: any
|
|
17
|
-
fillColor?: any, fillOpacity?: any, outlineColor?: any, outlineWidth?: any
|
|
18
|
-
labels?: boolean | string, seriesLabels?: boolean | string, labelSize?: number
|
|
19
|
-
labelPosition?: string, labelColor?: any, labelFmt?: any, yLabelFmt?: any, y2LabelFmt?: any
|
|
20
|
-
y2SeriesType?: string, stackTotalLabel?: boolean | string, showAllLabels?: boolean | string
|
|
21
|
-
seriesOrder?: any, seriesLabelFmt?: any
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const chartProps: Writable<any> = getContext(propKey)
|
|
25
|
-
const config: Writable<any> = getContext(configKey)
|
|
26
|
-
const {resolveColor} = getThemeStores()
|
|
27
|
-
|
|
28
|
-
let {
|
|
29
|
-
y = undefined, y2 = undefined, series = undefined, options = undefined, name = undefined,
|
|
30
|
-
type = 'stacked', stackName = undefined, fillColor = undefined, fillOpacity = undefined,
|
|
31
|
-
outlineColor = undefined, outlineWidth = undefined, labels = false, seriesLabels = true,
|
|
32
|
-
labelSize = 11, labelPosition = undefined, labelColor = undefined, labelFmt = undefined,
|
|
33
|
-
yLabelFmt = undefined, y2LabelFmt = undefined, y2SeriesType = 'bar', stackTotalLabel = true,
|
|
34
|
-
showAllLabels = false, seriesOrder = undefined, seriesLabelFmt = undefined,
|
|
35
|
-
}: Props = $props()
|
|
36
|
-
|
|
37
|
-
// Use $derived for values that depend on props
|
|
38
|
-
let ySet = $derived(y ? true : false)
|
|
39
|
-
let y2Set = $derived(y2 ? true : false)
|
|
40
|
-
let seriesSet = $derived(series ? true : false)
|
|
41
|
-
|
|
42
|
-
let fillColorStore = $derived(resolveColor(fillColor))
|
|
43
|
-
let outlineColorStore = $derived(resolveColor(outlineColor))
|
|
44
|
-
let labelColorStore = $derived(resolveColor(labelColor))
|
|
45
|
-
let labelsBool = $derived(labels === 'true' || labels === true)
|
|
46
|
-
let seriesLabelsBool = $derived(seriesLabels === 'true' || seriesLabels === true)
|
|
47
|
-
let stackTotalLabelBool = $derived(stackTotalLabel === 'true' || stackTotalLabel === true)
|
|
48
|
-
|
|
49
|
-
// Format objects derived from props
|
|
50
|
-
let labelFormat = $derived(labelFmt ? getFormatObjectFromString(labelFmt) : undefined)
|
|
51
|
-
let yLabelFormat = $derived(yLabelFmt ? getFormatObjectFromString(yLabelFmt) : undefined)
|
|
52
|
-
let y2LabelFormat = $derived(y2LabelFmt ? getFormatObjectFromString(y2LabelFmt) : undefined)
|
|
53
|
-
|
|
54
|
-
let barMaxWidth = 60
|
|
55
|
-
|
|
56
|
-
// Derive values from chartProps store instead of using $effect to assign
|
|
57
|
-
let data = $derived($chartProps.data)
|
|
58
|
-
let x = $derived($chartProps.x)
|
|
59
|
-
let resolvedY = $derived(ySet ? parseCommaList(y) : $chartProps.y)
|
|
60
|
-
let resolvedY2 = $derived(y2Set ? parseCommaList(y2) : $chartProps.y2)
|
|
61
|
-
let yFormat = $derived($chartProps.yFormat)
|
|
62
|
-
let y2Format = $derived($chartProps.y2Format)
|
|
63
|
-
let yCount = $derived($chartProps.yCount)
|
|
64
|
-
let y2Count = $derived($chartProps.y2Count)
|
|
65
|
-
let swapXY = $derived($chartProps.swapXY)
|
|
66
|
-
let baseXType = $derived($chartProps.xType)
|
|
67
|
-
let xMismatch = $derived($chartProps.xMismatch)
|
|
68
|
-
let columnSummary = $derived($chartProps.columnSummary)
|
|
69
|
-
let sort = $derived($chartProps.sort)
|
|
70
|
-
let resolvedSeries = $derived(seriesSet ? series : $chartProps.series)
|
|
71
|
-
let resolvedSeriesOrder = $derived(parseCommaList(seriesOrder))
|
|
72
|
-
|
|
73
|
-
// Value label positions:
|
|
74
|
-
const labelPositions = {
|
|
75
|
-
outside: 'top',
|
|
76
|
-
inside: 'inside',
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
const swapXYLabelPositions = {
|
|
80
|
-
outside: 'right',
|
|
81
|
-
inside: 'inside',
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Compute all the derived state in one $derived.by block to avoid read/write conflicts
|
|
85
|
-
let computedState = $derived.by(() => {
|
|
86
|
-
let isSingleSeries = !resolvedSeries && (!Array.isArray(resolvedY) || resolvedY.length === 1)
|
|
87
|
-
let computedData = data
|
|
88
|
-
let computedXType = baseXType
|
|
89
|
-
let computedName = name
|
|
90
|
-
let computedStackName = stackName
|
|
91
|
-
let computedDefaultLabelPosition = swapXY ? 'right' : 'top'
|
|
92
|
-
let computedStackTotalSeries: any[] = []
|
|
93
|
-
|
|
94
|
-
if (!data || !columnSummary) {
|
|
95
|
-
return {
|
|
96
|
-
data: computedData,
|
|
97
|
-
xType: computedXType,
|
|
98
|
-
name: computedName,
|
|
99
|
-
stackName: computedStackName,
|
|
100
|
-
defaultLabelPosition: computedDefaultLabelPosition,
|
|
101
|
-
stackTotalSeries: computedStackTotalSeries,
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
if (isSingleSeries) {
|
|
106
|
-
// Single Series
|
|
107
|
-
let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
|
|
108
|
-
if (col && columnSummary[col]) {
|
|
109
|
-
computedName = computedName ?? formatTitle(col, columnSummary[col].title)
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
if (swapXY && computedXType !== 'category') {
|
|
113
|
-
computedData = getCompletedData(computedData, x, resolvedY, resolvedSeries, true, computedXType !== 'time')
|
|
114
|
-
computedXType = 'category'
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
computedStackName = 'stack1'
|
|
118
|
-
computedDefaultLabelPosition = swapXY ? 'right' : 'top'
|
|
119
|
-
} else {
|
|
120
|
-
// Multi Series
|
|
121
|
-
// Sort by stack total for category axis
|
|
122
|
-
if (sort === true && computedXType === 'category') {
|
|
123
|
-
let stackedData = getStackedData(computedData, x, resolvedY)
|
|
124
|
-
|
|
125
|
-
if (Array.isArray(resolvedY) && resolvedY.length > 1) {
|
|
126
|
-
stackedData = getSortedData(stackedData, 'stackTotal', false)
|
|
127
|
-
} else {
|
|
128
|
-
let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
|
|
129
|
-
stackedData = getSortedData(stackedData, col, false)
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
let sortOrder = stackedData.map((d: any) => d[x])
|
|
133
|
-
computedData = [...computedData].sort(function (a: any, b: any) {
|
|
134
|
-
return sortOrder.indexOf(a[x]) - sortOrder.indexOf(b[x])
|
|
135
|
-
})
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
// Run fill for missing series entries, only if it's a stacked bar
|
|
139
|
-
if (swapXY || ((computedXType === 'value' || computedXType === 'category') && type.includes('stacked'))) {
|
|
140
|
-
computedData = getCompletedData(computedData, x, resolvedY, resolvedSeries, true, computedXType === 'value')
|
|
141
|
-
computedXType = 'category'
|
|
142
|
-
} else if (computedXType === 'time' && type.includes('stacked')) {
|
|
143
|
-
computedData = getCompletedData(computedData, x, resolvedY, resolvedSeries, true, true)
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
if (type.includes('stacked')) {
|
|
147
|
-
computedStackName = computedStackName ?? 'stack1'
|
|
148
|
-
computedDefaultLabelPosition = 'inside'
|
|
149
|
-
} else {
|
|
150
|
-
computedStackName = undefined
|
|
151
|
-
computedDefaultLabelPosition = swapXY ? 'right' : 'top'
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// Compute stack total series for stacked charts
|
|
156
|
-
if (type === 'stacked' && computedData) {
|
|
157
|
-
computedStackTotalSeries = getStackedData(computedData, x, resolvedY)
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
return {
|
|
161
|
-
data: computedData,
|
|
162
|
-
xType: computedXType,
|
|
163
|
-
name: computedName,
|
|
164
|
-
stackName: computedStackName,
|
|
165
|
-
defaultLabelPosition: computedDefaultLabelPosition,
|
|
166
|
-
stackTotalSeries: computedStackTotalSeries,
|
|
167
|
-
}
|
|
168
|
-
})
|
|
169
|
-
|
|
170
|
-
// Extract computed values for use in template and other derived values
|
|
171
|
-
let processedData = $derived(computedState.data)
|
|
172
|
-
let xType = $derived(computedState.xType)
|
|
173
|
-
let resolvedName = $derived(computedState.name)
|
|
174
|
-
let resolvedStackName = $derived(computedState.stackName)
|
|
175
|
-
let defaultLabelPosition = $derived(computedState.defaultLabelPosition)
|
|
176
|
-
let stackTotalSeries = $derived(computedState.stackTotalSeries)
|
|
177
|
-
|
|
178
|
-
let resolvedLabelPosition = $derived(
|
|
179
|
-
(swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition,
|
|
180
|
-
)
|
|
181
|
-
|
|
182
|
-
$effect(() => {
|
|
183
|
-
// Don't run until we have data
|
|
184
|
-
if (!processedData || !columnSummary) return
|
|
185
|
-
|
|
186
|
-
let baseConfig = {
|
|
187
|
-
type: 'bar',
|
|
188
|
-
stack: resolvedStackName,
|
|
189
|
-
label: {
|
|
190
|
-
show: labelsBool && seriesLabelsBool,
|
|
191
|
-
formatter: function (params: any) {
|
|
192
|
-
return params.value[swapXY ? 0 : 1] === 0
|
|
193
|
-
? ''
|
|
194
|
-
: formatValue(
|
|
195
|
-
params.value[swapXY ? 0 : 1],
|
|
196
|
-
[yLabelFormat ?? labelFormat ?? yFormat, y2LabelFormat ?? labelFormat ?? y2Format][
|
|
197
|
-
getYAxisIndex(params.componentIndex, yCount, y2Count)
|
|
198
|
-
],
|
|
199
|
-
)
|
|
200
|
-
},
|
|
201
|
-
position: resolvedLabelPosition,
|
|
202
|
-
fontSize: labelSize,
|
|
203
|
-
color: $labelColorStore,
|
|
204
|
-
},
|
|
205
|
-
labelLayout: {
|
|
206
|
-
hideOverlap: showAllLabels ? false : true,
|
|
207
|
-
},
|
|
208
|
-
emphasis: {
|
|
209
|
-
focus: 'series',
|
|
210
|
-
},
|
|
211
|
-
barMaxWidth: barMaxWidth,
|
|
212
|
-
itemStyle: {
|
|
213
|
-
color: $fillColorStore,
|
|
214
|
-
opacity: fillOpacity,
|
|
215
|
-
borderColor: $outlineColorStore,
|
|
216
|
-
borderWidth: outlineWidth,
|
|
217
|
-
},
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
let seriesConfig = getSeriesConfig(
|
|
221
|
-
processedData,
|
|
222
|
-
x,
|
|
223
|
-
resolvedY,
|
|
224
|
-
resolvedSeries,
|
|
225
|
-
swapXY,
|
|
226
|
-
baseConfig,
|
|
227
|
-
resolvedName,
|
|
228
|
-
xMismatch,
|
|
229
|
-
columnSummary,
|
|
230
|
-
resolvedSeriesOrder,
|
|
231
|
-
undefined,
|
|
232
|
-
undefined,
|
|
233
|
-
resolvedY2,
|
|
234
|
-
seriesLabelFmt,
|
|
235
|
-
)
|
|
236
|
-
|
|
237
|
-
config.update((d: any) => {
|
|
238
|
-
// Guard against incomplete config state
|
|
239
|
-
if (!d.series) d.series = []
|
|
240
|
-
if (!d.legend) d.legend = {data: []}
|
|
241
|
-
if (!d.legend.data) d.legend.data = []
|
|
242
|
-
|
|
243
|
-
d.series.push(...seriesConfig)
|
|
244
|
-
// Push series into legend:
|
|
245
|
-
d.legend.data.push(...seriesConfig.map((s: any) => s.name.toString()))
|
|
246
|
-
|
|
247
|
-
// Stacked chart total label:
|
|
248
|
-
// series !== x is to avoid an issue where same column is used for both - stackTotalLabel can't handle that
|
|
249
|
-
if (
|
|
250
|
-
labelsBool === true &&
|
|
251
|
-
type === 'stacked' &&
|
|
252
|
-
((Array.isArray(resolvedY) && resolvedY.length > 1) || (resolvedSeries !== undefined)) &&
|
|
253
|
-
stackTotalLabelBool === true &&
|
|
254
|
-
resolvedSeries !== x
|
|
255
|
-
) {
|
|
256
|
-
// push stack total series for total label
|
|
257
|
-
d.series.push({
|
|
258
|
-
type: 'bar',
|
|
259
|
-
stack: resolvedStackName,
|
|
260
|
-
name: 'stackTotal',
|
|
261
|
-
color: 'none',
|
|
262
|
-
data: stackTotalSeries.map((row: any) => {
|
|
263
|
-
let axisValue = xMismatch ? row[x].toString() : row[x]
|
|
264
|
-
if (swapXY) return [0, axisValue]
|
|
265
|
-
return [axisValue, 0]
|
|
266
|
-
}),
|
|
267
|
-
label: {
|
|
268
|
-
show: true,
|
|
269
|
-
position: swapXY ? 'right' : 'top',
|
|
270
|
-
formatter: function (params: any) {
|
|
271
|
-
let sum = 0
|
|
272
|
-
seriesConfig.forEach((s: any) => {
|
|
273
|
-
sum += s.data[params.dataIndex][swapXY ? 0 : 1]
|
|
274
|
-
})
|
|
275
|
-
return sum === 0 ? '' : formatValue(sum, labelFormat ?? yFormat)
|
|
276
|
-
},
|
|
277
|
-
fontWeight: 'bold',
|
|
278
|
-
fontSize: labelSize,
|
|
279
|
-
padding: swapXY ? [0, 0, 0, 5] : undefined,
|
|
280
|
-
},
|
|
281
|
-
})
|
|
282
|
-
|
|
283
|
-
// disable legend selected mode when stackTotalLabel is displayed:
|
|
284
|
-
d.legend.selectedMode = false
|
|
285
|
-
}
|
|
286
|
-
return d
|
|
287
|
-
})
|
|
288
|
-
})
|
|
289
|
-
|
|
290
|
-
let chartOverrides = $derived({
|
|
291
|
-
// Evidence definition of axes (yAxis = dependent, xAxis = independent)
|
|
292
|
-
xAxis: {
|
|
293
|
-
boundaryGap: ['1%', '2%'],
|
|
294
|
-
type: xType,
|
|
295
|
-
},
|
|
296
|
-
})
|
|
297
|
-
|
|
298
|
-
// Use $effect.pre() instead of beforeUpdate for runes mode
|
|
299
|
-
$effect.pre(() => {
|
|
300
|
-
// This ensures that these overrides always run before we render the chart.
|
|
301
|
-
// otherwise, this block won't re-execute after a change to the data object, and
|
|
302
|
-
// the chart will re-render using the base config from Chart.svelte
|
|
303
|
-
|
|
304
|
-
if (options) {
|
|
305
|
-
config.update((d: any) => {
|
|
306
|
-
return {...d, ...options}
|
|
307
|
-
})
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
if (chartOverrides) {
|
|
311
|
-
config.update((d: any) => {
|
|
312
|
-
// Guard against incomplete config state
|
|
313
|
-
if (!d.yAxis || !Array.isArray(d.yAxis)) return d
|
|
314
|
-
|
|
315
|
-
if (type.includes('stacked')) {
|
|
316
|
-
d.tooltip = {...d.tooltip, order: 'seriesDesc'}
|
|
317
|
-
} else {
|
|
318
|
-
d.tooltip = {...d.tooltip, order: 'seriesAsc'}
|
|
319
|
-
}
|
|
320
|
-
if (type === 'stacked100') {
|
|
321
|
-
if (swapXY) {
|
|
322
|
-
d.xAxis = {...d.xAxis, max: 1}
|
|
323
|
-
} else if (d.yAxis[0]) {
|
|
324
|
-
d.yAxis[0] = {...d.yAxis[0], max: 1}
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
if (swapXY) {
|
|
328
|
-
d.yAxis = {...d.yAxis, ...chartOverrides.xAxis}
|
|
329
|
-
d.xAxis = {...d.xAxis}
|
|
330
|
-
} else {
|
|
331
|
-
if (d.yAxis[0]) {
|
|
332
|
-
d.yAxis[0] = {...d.yAxis[0]}
|
|
333
|
-
}
|
|
334
|
-
d.xAxis = {...d.xAxis, ...chartOverrides.xAxis}
|
|
335
|
-
if (y2Count > 0 && d.yAxis[1]) {
|
|
336
|
-
if (['line', 'bar', 'scatter'].includes(y2SeriesType) && d.series) {
|
|
337
|
-
for (let i = 0; i < y2Count; i++) {
|
|
338
|
-
if (d.series[yCount + i]) {
|
|
339
|
-
d.series[yCount + i].type = y2SeriesType
|
|
340
|
-
d.series[yCount + i].stack = undefined
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
return d
|
|
347
|
-
})
|
|
348
|
-
}
|
|
349
|
-
})
|
|
350
|
-
</script>
|