-
Notifications
You must be signed in to change notification settings - Fork 171
/
_BigValue.svelte
144 lines (128 loc) · 3.81 KB
/
_BigValue.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<script>
import Value from './Value.svelte';
import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
import checkInputs from '@evidence-dev/component-utilities/checkInputs';
import BigValueError from './BigValueError.svelte';
import Sparkline from './Sparkline.svelte';
import { strictBuild } from '@evidence-dev/component-utilities/chartContext';
import Delta from './Delta.svelte';
export let data;
export let value = null;
export let comparison = null;
export let comparisonDelta = true;
$: comparisonDelta = comparisonDelta === 'true' || comparisonDelta === true;
export let sparkline = null;
export let sparklineType = 'line'; // line, area, or bar
export let sparklineColor = undefined;
export let sparklineValueFmt = undefined;
export let sparklineDateFmt = undefined;
export let sparklineYScale = false;
$: sparklineYScale = sparklineYScale === 'true' || sparklineYScale === true;
export let connectGroup = undefined;
// Formatting:
export let fmt = undefined;
export let comparisonFmt = undefined;
export let title = null;
export let comparisonTitle = null;
// Delta controls
export let downIsGood = false;
export let neutralMin = 0;
export let neutralMax = 0;
export let maxWidth = 'none';
export let minWidth = '18%';
let positive = true;
let comparisonColor = 'var(--grey-700)';
let error = undefined;
$: try {
error = undefined;
if (!value) {
throw new Error('value is required');
}
if (!Array.isArray(data)) {
data = [data];
}
checkInputs(data, [value]);
let columnSummary = getColumnSummary(data, 'array');
// Fall back titles
let valueColumnSummary = columnSummary.find((d) => d.id === value);
title = title ?? (valueColumnSummary ? valueColumnSummary.title : null);
if (comparison) {
checkInputs(data, [comparison]);
let comparisonColumnSummary = columnSummary.find((d) => d.id === comparison);
comparisonTitle =
comparisonTitle ?? (comparisonColumnSummary ? comparisonColumnSummary.title : null);
}
if (data && comparison) {
positive = data[0][comparison] >= 0;
comparisonColor =
(positive && !downIsGood) || (!positive && downIsGood)
? 'var(--green-700)'
: 'var(--red-700)';
}
if (sparkline) {
checkInputs(data, [sparkline]);
if (columnSummary.find((d) => d.id === sparkline)?.type !== 'date') {
throw Error('sparkline must be a date column');
}
}
} catch (e) {
error = e;
const setTextRed = '\x1b[31m%s\x1b[0m';
console.error(setTextRed, `Error in Big Value: ${error.message}`);
if (strictBuild) {
throw error;
}
}
</script>
<div
class="inline-block font-sans pt-2 pb-3 pr-3 pl-0 mr-3 items-center align-top"
style={`
min-width: ${minWidth};
max-width: ${maxWidth};
`}
>
{#if error}
<BigValueError chartType="Big Value" error={error.message} />
{:else}
<p class="text-sm text-gray-700">{title}</p>
<div class="relative text-xl font-medium text-gray-700 my-0.5">
<Value {data} column={value} {fmt} />
{#if sparkline}
<Sparkline
height="15"
{data}
dateCol={sparkline}
valueCol={value}
type={sparklineType}
interactive="true"
color={sparklineColor}
valueFmt={fmt ?? sparklineValueFmt}
dateFmt={sparklineDateFmt}
yScale={sparklineYScale}
{connectGroup}
/>
{/if}
</div>
{#if comparison}
{#if comparisonDelta}
<p class="text-xs font-sans" style={`color:${comparisonColor}`}>
<Delta
{data}
column={comparison}
fmt={comparisonFmt}
fontClass="text-xs"
symbolPosition="left"
{neutralMin}
{neutralMax}
text={comparisonTitle}
/>
</p>
{:else}
<p class="text-xs font-sans text-gray-500 pt-[0.5px]">
<Value {data} column={comparison} fmt={comparisonFmt} />
<span>{comparisonTitle}</span>
</p>
{/if}
{/if}
{/if}
</div>