-
Notifications
You must be signed in to change notification settings - Fork 168
/
Column.svelte
147 lines (127 loc) · 3.39 KB
/
Column.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
145
146
147
<script context="module">
export const evidenceInclude = true;
</script>
<script>
import { getContext } from 'svelte';
import { propKey, strictBuild } from '@evidence-dev/component-utilities/chartContext';
let props = getContext(propKey);
let error;
export let id;
// Simple check of column name in dataset. Should be replaced with robust error handling in the future:
$: checkColumnName();
/**
* Check column name and handle error if doesn't exist
*/
function checkColumnName() {
try {
if (!Object.keys($props.data[0]).includes(id)) {
error = 'Error in table: ' + id + ' does not exist in the dataset';
throw new Error(error);
}
} catch (e) {
error = e.message;
if (strictBuild) {
throw error;
}
}
}
export let title = undefined;
export let align = undefined;
if (align === 'centre') {
align = 'center';
}
export let wrap = false;
$: wrap = wrap === 'true' || wrap === true;
// COLUMN CONTENT TYPES:
export let contentType = undefined;
// Images:
export let height = undefined;
export let width = undefined;
export let alt = undefined;
// Links:
export let openInNewTab = false;
$: openInNewTab = openInNewTab === 'true' || openInNewTab === true;
export let linkLabel = undefined;
// Formatting:
export let fmt = undefined;
// Totals:
export let totalAgg = undefined;
export let totalFmt = undefined;
export let weightCol = undefined; // column to use as the weights for weighted average
// Subtotals:
export let subtotalFmt = undefined;
// Color Scale:
export let colorMax = undefined;
export let colorMin = undefined;
export let scaleColor = 'green';
let colorList = {
green: 'hsla(129, 33%, 57%,',
red: 'hsla(0, 56%, 56%,',
blue: 'hsla(198, 56%, 56%,'
};
let useColor = colorList[scaleColor];
let customColor = undefined;
if (useColor == undefined) {
customColor = scaleColor;
}
// Delta:
export let downIsGood = false;
$: downIsGood = downIsGood === 'true' || downIsGood === true;
export let showValue = true;
$: showValue = showValue === 'true' || showValue === true;
export let deltaSymbol = true;
$: deltaSymbol = deltaSymbol === 'true' || deltaSymbol === true;
export let neutralMin = 0;
export let neutralMax = 0;
export let chip = false;
$: chip = chip === 'true' || chip === true;
$: options = {
id: id,
title: title,
align: align,
wrap: wrap,
contentType: contentType,
height: height,
width: width,
alt: alt,
openInNewTab: openInNewTab,
linkLabel: linkLabel,
fmt: fmt,
totalAgg: totalAgg,
totalFmt: totalFmt,
subtotalFmt: subtotalFmt,
weightCol: weightCol,
downIsGood: downIsGood,
deltaSymbol: deltaSymbol,
chip: chip,
neutralMin: neutralMin,
neutralMax: neutralMax,
showValue: showValue,
colorMax: colorMax,
colorMin: colorMin,
scaleColor: scaleColor,
useColor: useColor,
customColor: customColor
};
/**
* Ensures that column props (e.g. title) are reflected in the table's state.
* Without this function, props are only used on first render, and are not reactive
* @returns {void}
*/
const updateProps = () => {
props.update((d) => {
const matchingIndex = d.columns.findIndex((c) => c.id === id);
if (matchingIndex === -1) {
d.columns.push(options);
} else {
d.columns = [
...d.columns.slice(0, matchingIndex),
options,
...d.columns.slice(matchingIndex + 1)
];
}
return d;
});
};
$: options, updateProps();
</script>