@malloydata/render 0.0.24-dev230224214106 → 0.0.24-dev230228224434

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.
Files changed (58) hide show
  1. package/dist/data_styles.d.ts +27 -27
  2. package/dist/drill.d.ts +1 -1
  3. package/dist/drill.js +12 -12
  4. package/dist/html/bar_chart.d.ts +4 -4
  5. package/dist/html/bar_chart.js +5 -5
  6. package/dist/html/boolean.d.ts +2 -2
  7. package/dist/html/bytes.d.ts +2 -2
  8. package/dist/html/bytes.js +1 -1
  9. package/dist/html/cartesian_chart.d.ts +4 -4
  10. package/dist/html/cartesian_chart.js +30 -30
  11. package/dist/html/chart.d.ts +5 -5
  12. package/dist/html/chart.js +10 -10
  13. package/dist/html/container.d.ts +3 -3
  14. package/dist/html/currency.d.ts +2 -2
  15. package/dist/html/currency.js +4 -4
  16. package/dist/html/dashboard.d.ts +3 -3
  17. package/dist/html/dashboard.js +32 -31
  18. package/dist/html/date.d.ts +2 -2
  19. package/dist/html/date.js +2 -2
  20. package/dist/html/html_view.d.ts +3 -3
  21. package/dist/html/html_view.js +40 -40
  22. package/dist/html/image.d.ts +2 -2
  23. package/dist/html/image.js +2 -2
  24. package/dist/html/index.d.ts +1 -1
  25. package/dist/html/json.d.ts +2 -2
  26. package/dist/html/json.js +2 -2
  27. package/dist/html/line_chart.d.ts +4 -4
  28. package/dist/html/line_chart.js +6 -6
  29. package/dist/html/link.d.ts +2 -2
  30. package/dist/html/link.js +4 -4
  31. package/dist/html/list.d.ts +3 -3
  32. package/dist/html/list.js +7 -7
  33. package/dist/html/list_detail.d.ts +2 -2
  34. package/dist/html/number.d.ts +2 -2
  35. package/dist/html/percent.d.ts +2 -2
  36. package/dist/html/percent.js +1 -1
  37. package/dist/html/point_map.d.ts +4 -4
  38. package/dist/html/point_map.js +69 -69
  39. package/dist/html/scatter_chart.d.ts +4 -4
  40. package/dist/html/scatter_chart.js +6 -6
  41. package/dist/html/segment_map.d.ts +4 -4
  42. package/dist/html/segment_map.js +61 -61
  43. package/dist/html/shape_map.d.ts +4 -4
  44. package/dist/html/shape_map.js +73 -73
  45. package/dist/html/state_codes.js +108 -108
  46. package/dist/html/table.d.ts +3 -3
  47. package/dist/html/table.js +16 -16
  48. package/dist/html/text.d.ts +2 -2
  49. package/dist/html/text.js +1 -1
  50. package/dist/html/unsupported.d.ts +2 -2
  51. package/dist/html/unsupported.js +4 -4
  52. package/dist/html/utils.d.ts +4 -4
  53. package/dist/html/utils.js +51 -51
  54. package/dist/html/vega_spec.d.ts +6 -6
  55. package/dist/html/vega_spec.js +287 -287
  56. package/dist/index.d.ts +2 -2
  57. package/dist/renderer.d.ts +3 -3
  58. package/package.json +2 -2
package/dist/html/scatter_chart.js CHANGED
@@ -26,21 +26,21 @@ exports.HTMLScatterChartRenderer = void 0;
26
26
  const cartesian_chart_1 = require("./cartesian_chart");
27
27
  class HTMLScatterChartRenderer extends cartesian_chart_1.HTMLCartesianChartRenderer {
28
28
  getMark() {
29
- return "point";
29
+ return 'point';
30
30
  }
31
31
  getDataType(field) {
32
32
  if (field.isAtomicField()) {
33
33
  if (field.isDate() || field.isTimestamp()) {
34
- return "temporal";
34
+ return 'temporal';
35
35
  }
36
36
  else if (field.isString()) {
37
- return "nominal";
37
+ return 'nominal';
38
38
  }
39
39
  else if (field.isNumber()) {
40
- return "quantitative";
40
+ return 'quantitative';
41
41
  }
42
42
  }
43
- throw new Error("Invalid field type for scatter chart.");
43
+ throw new Error('Invalid field type for scatter chart.');
44
44
  }
45
45
  getDataValue(data) {
46
46
  if (data.isNull()) {
@@ -53,7 +53,7 @@ class HTMLScatterChartRenderer extends cartesian_chart_1.HTMLCartesianChartRende
53
53
  return data.value;
54
54
  }
55
55
  else {
56
- throw new Error("Invalid field type for scatter chart.");
56
+ throw new Error('Invalid field type for scatter chart.');
57
57
  }
58
58
  }
59
59
  }
package/dist/html/segment_map.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import * as lite from "vega-lite";
2
- import { DataArray, DataColumn, Field } from "@malloydata/malloy";
3
- import { HTMLChartRenderer } from "./chart";
1
+ import * as lite from 'vega-lite';
2
+ import { DataArray, DataColumn, Field } from '@malloydata/malloy';
3
+ import { HTMLChartRenderer } from './chart';
4
4
  export declare class HTMLSegmentMapRenderer extends HTMLChartRenderer {
5
5
  getDataValue(data: DataColumn): string | number | null;
6
- getDataType(field: Field): "ordinal" | "quantitative" | "nominal";
6
+ getDataType(field: Field): 'ordinal' | 'quantitative' | 'nominal';
7
7
  getVegaLiteSpec(data: DataArray): lite.TopLevelSpec;
8
8
  }
package/dist/html/segment_map.js CHANGED
@@ -34,23 +34,23 @@ class HTMLSegmentMapRenderer extends chart_1.HTMLChartRenderer {
34
34
  if (data.isNull() || data.isNumber() || data.isString()) {
35
35
  return data.value;
36
36
  }
37
- throw new Error("Invalid field type for segment map.");
37
+ throw new Error('Invalid field type for segment map.');
38
38
  }
39
39
  getDataType(field) {
40
40
  if (field.isAtomicField()) {
41
41
  if (field.isString()) {
42
- return "nominal";
42
+ return 'nominal';
43
43
  }
44
44
  else if (field.isNumber()) {
45
- return "quantitative";
45
+ return 'quantitative';
46
46
  }
47
47
  // TODO dates nominal?
48
48
  }
49
- throw new Error("Invalid field type for segment map.");
49
+ throw new Error('Invalid field type for segment map.');
50
50
  }
51
51
  getVegaLiteSpec(data) {
52
52
  if (data.isNull()) {
53
- throw new Error("Expected struct value not to be null.");
53
+ throw new Error('Expected struct value not to be null.');
54
54
  }
55
55
  const fields = data.field.intrinsicFields;
56
56
  const lat1Field = fields[0];
@@ -61,76 +61,76 @@ class HTMLSegmentMapRenderer extends chart_1.HTMLChartRenderer {
61
61
  const colorType = colorField ? this.getDataType(colorField) : undefined;
62
62
  const colorDef = colorField !== undefined
63
63
  ? {
64
- "field": colorField.name,
65
- "type": colorType,
66
- "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
67
- "scale": (0, utils_1.getColorScale)(colorType, false)
64
+ field: colorField.name,
65
+ type: colorType,
66
+ axis: { title: (0, utils_1.formatTitle)(this.options, colorField.name) },
67
+ scale: (0, utils_1.getColorScale)(colorType, false),
68
68
  }
69
69
  : undefined;
70
70
  return {
71
71
  ...this.getSize(),
72
- "data": {
73
- "values": this.mapData(data)
72
+ data: {
73
+ values: this.mapData(data),
74
74
  },
75
- "projection": {
76
- "type": "albersUsa"
75
+ projection: {
76
+ type: 'albersUsa',
77
77
  },
78
- "layer": [
78
+ layer: [
79
79
  {
80
- "data": {
81
- "values": states_10m_json_1.default,
82
- "format": {
83
- "type": "topojson",
84
- "feature": "states"
85
- }
80
+ data: {
81
+ values: states_10m_json_1.default,
82
+ format: {
83
+ type: 'topojson',
84
+ feature: 'states',
85
+ },
86
+ },
87
+ mark: {
88
+ type: 'geoshape',
89
+ fill: 'lightgray',
90
+ stroke: 'white',
86
91
  },
87
- "mark": {
88
- "type": "geoshape",
89
- "fill": "lightgray",
90
- "stroke": "white"
91
- }
92
92
  },
93
93
  {
94
- "mark": "line",
95
- "encoding": {
96
- "latitude": { "field": lat1Field.name, "type": "quantitative" },
97
- "longitude": { "field": lon1Field.name, "type": "quantitative" },
98
- "latitude2": { "field": lat2Field.name, "type": "quantitative" },
99
- "longitude2": { "field": lon2Field.name, "type": "quantitative" },
100
- "color": colorDef
101
- }
102
- }
94
+ mark: 'line',
95
+ encoding: {
96
+ latitude: { field: lat1Field.name, type: 'quantitative' },
97
+ longitude: { field: lon1Field.name, type: 'quantitative' },
98
+ latitude2: { field: lat2Field.name, type: 'quantitative' },
99
+ longitude2: { field: lon2Field.name, type: 'quantitative' },
100
+ color: colorDef,
101
+ },
102
+ },
103
103
  ],
104
- "background": "transparent",
105
- "config": {
106
- "axis": {
107
- "labelFont": "var(--malloy-font-family, Roboto)",
108
- "titleFont": "var(--malloy-font-family, Roboto)",
109
- "titleFontWeight": 500,
110
- "titleColor": "var(--malloy-title-color, #505050)",
111
- "labelColor": "var(--malloy-label-color, #000000)",
112
- "titleFontSize": 12
104
+ background: 'transparent',
105
+ config: {
106
+ axis: {
107
+ labelFont: 'var(--malloy-font-family, Roboto)',
108
+ titleFont: 'var(--malloy-font-family, Roboto)',
109
+ titleFontWeight: 500,
110
+ titleColor: 'var(--malloy-title-color, #505050)',
111
+ labelColor: 'var(--malloy-label-color, #000000)',
112
+ titleFontSize: 12,
113
113
  },
114
- "legend": {
115
- "labelFont": "var(--malloy-font-family, Roboto)",
116
- "titleFont": "var(--malloy-font-family, Roboto)",
117
- "titleFontWeight": 500,
118
- "titleColor": "var(--malloy-title-color, #505050)",
119
- "labelColor": "var(--malloy-label-color, #000000)",
120
- "titleFontSize": 12
114
+ legend: {
115
+ labelFont: 'var(--malloy-font-family, Roboto)',
116
+ titleFont: 'var(--malloy-font-family, Roboto)',
117
+ titleFontWeight: 500,
118
+ titleColor: 'var(--malloy-title-color, #505050)',
119
+ labelColor: 'var(--malloy-label-color, #000000)',
120
+ titleFontSize: 12,
121
121
  },
122
- "header": {
123
- "labelFont": "var(--malloy-font-family, Roboto)",
124
- "titleFont": "var(--malloy-font-family, Roboto)",
125
- "titleFontWeight": 500
122
+ header: {
123
+ labelFont: 'var(--malloy-font-family, Roboto)',
124
+ titleFont: 'var(--malloy-font-family, Roboto)',
125
+ titleFontWeight: 500,
126
126
  },
127
- "mark": { "font": "var(--malloy-font-family, Roboto)" },
128
- "title": {
129
- "font": "var(--malloy-font-family, Roboto)",
130
- "subtitleFont": "var(--malloy-font-family, Roboto)",
131
- "fontWeight": 500
132
- }
133
- }
127
+ mark: { font: 'var(--malloy-font-family, Roboto)' },
128
+ title: {
129
+ font: 'var(--malloy-font-family, Roboto)',
130
+ subtitleFont: 'var(--malloy-font-family, Roboto)',
131
+ fontWeight: 500,
132
+ },
133
+ },
134
134
  };
135
135
  }
136
136
  }
package/dist/html/shape_map.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import * as lite from "vega-lite";
2
- import { DataColumn, Field } from "@malloydata/malloy";
3
- import { HTMLChartRenderer } from "./chart";
1
+ import * as lite from 'vega-lite';
2
+ import { DataColumn, Field } from '@malloydata/malloy';
3
+ import { HTMLChartRenderer } from './chart';
4
4
  export declare class HTMLShapeMapRenderer extends HTMLChartRenderer {
5
5
  private getRegionField;
6
6
  private getColorField;
7
7
  getDataValue(data: DataColumn): string | number | undefined;
8
- getDataType(field: Field): "ordinal" | "quantitative" | "nominal";
8
+ getDataType(field: Field): 'ordinal' | 'quantitative' | 'nominal';
9
9
  getVegaLiteSpec(data: DataColumn): lite.TopLevelSpec;
10
10
  }
package/dist/html/shape_map.js CHANGED
@@ -58,122 +58,122 @@ class HTMLShapeMapRenderer extends chart_1.HTMLChartRenderer {
58
58
  return undefined;
59
59
  }
60
60
  else {
61
- throw new Error("Invalid field type for shape map.");
61
+ throw new Error('Invalid field type for shape map.');
62
62
  }
63
63
  }
64
64
  getDataType(field) {
65
65
  if (field.isAtomicField()) {
66
66
  if (field.isDate() || field.isTimestamp()) {
67
- return "nominal";
67
+ return 'nominal';
68
68
  }
69
69
  else if (field.isString()) {
70
70
  if (field === this.getRegionField(field.parentExplore)) {
71
- return "quantitative";
71
+ return 'quantitative';
72
72
  }
73
73
  else {
74
- return "nominal";
74
+ return 'nominal';
75
75
  }
76
76
  }
77
77
  else if (field.isNumber()) {
78
- return "quantitative";
78
+ return 'quantitative';
79
79
  }
80
80
  }
81
- throw new Error("Invalid field type for shape map.");
81
+ throw new Error('Invalid field type for shape map.');
82
82
  }
83
83
  getVegaLiteSpec(data) {
84
84
  if (data.isNull()) {
85
- throw new Error("Expected struct value not to be null.");
85
+ throw new Error('Expected struct value not to be null.');
86
86
  }
87
87
  if (!data.isArray()) {
88
- throw new Error("Invalid data for shape map");
88
+ throw new Error('Invalid data for shape map');
89
89
  }
90
90
  const regionField = this.getRegionField(data.field);
91
91
  const colorField = this.getColorField(data.field);
92
92
  const colorType = colorField ? this.getDataType(colorField) : undefined;
93
93
  const colorDef = colorField !== undefined
94
94
  ? {
95
- "field": colorField.name,
96
- "type": colorType,
97
- "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
98
- "scale": (0, utils_1.getColorScale)(colorType, false)
95
+ field: colorField.name,
96
+ type: colorType,
97
+ axis: { title: (0, utils_1.formatTitle)(this.options, colorField.name) },
98
+ scale: (0, utils_1.getColorScale)(colorType, false),
99
99
  }
100
100
  : undefined;
101
- const mapped = this.mapData(data).filter((row) => row[regionField.name] !== undefined);
101
+ const mapped = this.mapData(data).filter(row => row[regionField.name] !== undefined);
102
102
  return {
103
103
  ...this.getSize(),
104
- "data": { "values": mapped },
105
- "projection": {
106
- "type": "albersUsa"
104
+ data: { values: mapped },
105
+ projection: {
106
+ type: 'albersUsa',
107
107
  },
108
- "layer": [
108
+ layer: [
109
109
  {
110
- "data": {
111
- "values": states_10m_json_1.default,
112
- "format": {
113
- "type": "topojson",
114
- "feature": "states"
115
- }
110
+ data: {
111
+ values: states_10m_json_1.default,
112
+ format: {
113
+ type: 'topojson',
114
+ feature: 'states',
115
+ },
116
+ },
117
+ mark: {
118
+ type: 'geoshape',
119
+ fill: '#efefef',
120
+ stroke: 'white',
116
121
  },
117
- "mark": {
118
- "type": "geoshape",
119
- "fill": "#efefef",
120
- "stroke": "white"
121
- }
122
122
  },
123
123
  {
124
- "transform": [
124
+ transform: [
125
125
  {
126
- "lookup": regionField.name,
127
- "from": {
128
- "data": {
129
- "values": states_10m_json_1.default,
130
- "format": {
131
- "type": "topojson",
132
- "feature": "states"
133
- }
126
+ lookup: regionField.name,
127
+ from: {
128
+ data: {
129
+ values: states_10m_json_1.default,
130
+ format: {
131
+ type: 'topojson',
132
+ feature: 'states',
133
+ },
134
134
  },
135
- "key": "id"
135
+ key: 'id',
136
136
  },
137
- "as": "geo"
138
- }
137
+ as: 'geo',
138
+ },
139
139
  ],
140
- "mark": "geoshape",
141
- "encoding": {
142
- "shape": { "field": "geo", "type": "geojson" },
143
- "color": colorDef
144
- }
145
- }
140
+ mark: 'geoshape',
141
+ encoding: {
142
+ shape: { field: 'geo', type: 'geojson' },
143
+ color: colorDef,
144
+ },
145
+ },
146
146
  ],
147
- "background": "transparent",
148
- "config": {
149
- "axis": {
150
- "labelFont": "var(--malloy-font-family, Roboto)",
151
- "titleFont": "var(--malloy-font-family, Roboto)",
152
- "titleFontWeight": 500,
153
- "titleColor": "var(--malloy-title-color, #505050)",
154
- "labelColor": "var(--malloy-label-color, #000000)",
155
- "titleFontSize": 12
147
+ background: 'transparent',
148
+ config: {
149
+ axis: {
150
+ labelFont: 'var(--malloy-font-family, Roboto)',
151
+ titleFont: 'var(--malloy-font-family, Roboto)',
152
+ titleFontWeight: 500,
153
+ titleColor: 'var(--malloy-title-color, #505050)',
154
+ labelColor: 'var(--malloy-label-color, #000000)',
155
+ titleFontSize: 12,
156
156
  },
157
- "legend": {
158
- "labelFont": "var(--malloy-font-family, Roboto)",
159
- "titleFont": "var(--malloy-font-family, Roboto)",
160
- "titleFontWeight": 500,
161
- "titleColor": "var(--malloy-title-color, #505050)",
162
- "labelColor": "var(--malloy-label-color, #000000)",
163
- "titleFontSize": 12
157
+ legend: {
158
+ labelFont: 'var(--malloy-font-family, Roboto)',
159
+ titleFont: 'var(--malloy-font-family, Roboto)',
160
+ titleFontWeight: 500,
161
+ titleColor: 'var(--malloy-title-color, #505050)',
162
+ labelColor: 'var(--malloy-label-color, #000000)',
163
+ titleFontSize: 12,
164
164
  },
165
- "header": {
166
- "labelFont": "var(--malloy-font-family, Roboto)",
167
- "titleFont": "var(--malloy-font-family, Roboto)",
168
- "titleFontWeight": 500
165
+ header: {
166
+ labelFont: 'var(--malloy-font-family, Roboto)',
167
+ titleFont: 'var(--malloy-font-family, Roboto)',
168
+ titleFontWeight: 500,
169
169
  },
170
- "mark": { "font": "var(--malloy-font-family, Roboto)" },
171
- "title": {
172
- "font": "var(--malloy-font-family, Roboto)",
173
- "subtitleFont": "var(--malloy-font-family, Roboto)",
174
- "fontWeight": 500
175
- }
176
- }
170
+ mark: { font: 'var(--malloy-font-family, Roboto)' },
171
+ title: {
172
+ font: 'var(--malloy-font-family, Roboto)',
173
+ subtitleFont: 'var(--malloy-font-family, Roboto)',
174
+ fontWeight: 500,
175
+ },
176
+ },
177
177
  };
178
178
  }
179
179
  }