84 |
90 |
85 | {features.map((props, idx) => (
86 |
89 | docs directory.
27 |
28 | ),
29 | },
30 | {
31 | title: 'Powered by React',
32 | imageUrl: 'img/undraw_docusaurus_react.svg',
33 | description: (
34 | <>
35 | Extend or customize your website layout by reusing React. Docusaurus can
36 | be extended while reusing the same header and footer.
37 |
38 | ),
39 | },
40 | ];
41 |
42 | function Feature({imageUrl, title, description}) {
43 | const imgUrl = useBaseUrl(imageUrl);
44 | return (
45 |
46 | {imgUrl && (
47 |
54 | );
55 | }
56 |
57 | function Home() {
58 | const context = useDocusaurusContext();
59 | const {siteConfig = {}} = context;
60 | return (
61 |
48 | 
49 |
50 | )}
51 |
49 | {title}
52 |{description}
53 |
66 |
79 | {siteConfig.title}
67 |{siteConfig.tagline}
68 |
69 |
75 | Get Started
76 |
77 |
78 | Chart](#Chart)
60 | This is the entry point for creating a chart with raw. It will return an instance of the RAWChart class and takes two parameters:
61 |
62 | | Param | Type |
63 | | --- | --- |
64 | | chartImplementation | [ChartImplementation](#ChartImplementation) |
65 | | config | [RawConfig](#RawConfig) |
66 |
67 |
68 | The first parameter, the `chartImplementation` is a chart object conforming the [chart interface](chart-interface.md).
69 |
70 | The second parameter, the `config` object, has following properties:
71 |
72 | | Name | Type | Default | Description |
73 | | --- | --- | --- | --- |
74 | | data | Array.<Object> | | the tabular data to be represented |
75 | | dataTypes | [DataTypes](#DataTypes) | | object with data types annotations (column name => type name) |
76 | | mapping | [Mapping](#Mapping) | | the current mapping of column names to dimensions of the current visual model |
77 | | [visualOptions] | [VisualOptions](#VisualOptions) | {} | visual options values |
78 | | [styles] | Object | {} | css in js styles definitions |
79 |
80 |
81 |
82 | ## 5. Rendering to the DOM
83 | Once we have a chart instance, we're ready to render in to the DOM.
84 | First, we must get an instance of valid DOM node, in our case we're using the `getElementById` method of the current document. This node will be the container of our visualization.
85 |
86 | To render the chart, we call the `renderToDOM` method of our chart instance, which has the following signature
87 |
88 | ### chart.renderToDOM(domNode) ⇒ [DOMChart](api.md#domchart)
89 |
90 | this function call will draw the chart in your document and return an instance of the `DOMChart` class, which extends the `Chart` class and has an internal reference to the DOM node.
91 |
92 | :::info
93 | At the moment rawgraphs-core has not support for **updating** a chart once it's rendered. In the `renderToDOM` method, the target dom node inner html is always cleaned before proceeding to the actual chart rendering.
94 | :::
95 |
--------------------------------------------------------------------------------
/data/orchestra.csv:
--------------------------------------------------------------------------------
1 | Orchestra type,Group,Instrument,Number
2 | Modern orchestra,Brass,Baritone horn,1
3 | Early Romantic orchestra,Woodwinds,Bass Clarinet,1
4 | Late Romantic orchestra,Woodwinds,Bass Clarinet,1
5 | Early Romantic orchestra,Percussion,Bass Drum,1
6 | Late Romantic orchestra,Percussion,Bass Drum,1
7 | Modern orchestra,Percussion,Bass Drum,1
8 | Classical orchestra,Woodwinds,Bassoons,2
9 | Early Romantic orchestra,Woodwinds,Bassoons,2
10 | Late Romantic orchestra,Woodwinds,Bassoons,3
11 | Modern orchestra,Woodwinds,Bassoons,4
12 | Late Romantic orchestra,Keyboards,Celesta,1
13 | Modern orchestra,Keyboards,Celesta,1
14 | Classical orchestra,Strings,Cellos,2
15 | Early Romantic orchestra,Strings,Cellos,8
16 | Late Romantic orchestra,Strings,Cellos,10
17 | Modern orchestra,Strings,Cellos,12
18 | Late Romantic orchestra,Percussion,Chimes,1
19 | Classical orchestra,Woodwinds,Clarinets,2
20 | Modern orchestra,Woodwinds,Clarinets,4
21 | Early Romantic orchestra,Woodwinds,Clarinets,2
22 | Late Romantic orchestra,Woodwinds,Clarinets,3
23 | Early Romantic orchestra,Woodwinds,Contrabassoon,1
24 | Late Romantic orchestra,Woodwinds,Contrabassoon,1
25 | Early Romantic orchestra,Brass,Cornet,2
26 | Early Romantic orchestra,Percussion,Cymbals,1
27 | Late Romantic orchestra,Percussion,Cymbals,1
28 | Modern orchestra,Percussion,Cymbals,1
29 | Classical orchestra,Strings,Double basses,1
30 | Early Romantic orchestra,Strings,Double basses,6
31 | Late Romantic orchestra,Strings,Double basses,8
32 | Modern orchestra,Strings,Double basses,10
33 | Early Romantic orchestra,Woodwinds,English Horn,1
34 | Late Romantic orchestra,Woodwinds,English Horn,1
35 | Classical orchestra,Woodwinds,Flutes,2
36 | Early Romantic orchestra,Woodwinds,Flutes,2
37 | Late Romantic orchestra,Woodwinds,Flutes,3
38 | Modern orchestra,Woodwinds,Flutes,4
39 | Classical orchestra,Brass,French Horns,4
40 | Early Romantic orchestra,Brass,French Horns,4
41 | Late Romantic orchestra,Brass,French Horns,8
42 | Modern orchestra,Brass,French Horns,8
43 | Early Romantic orchestra,Percussion,Glockenspiel,1
44 | Late Romantic orchestra,Percussion,Glockenspiel,1
45 | Modern orchestra,Percussion,Glockenspiel,1
46 | Early Romantic orchestra,Strings,Harps,1
47 | Late Romantic orchestra,Strings,Harps,2
48 | Modern orchestra,Strings,Harps,2
49 | Modern orchestra,Percussion,Marimba,1
50 | Classical orchestra,Woodwinds,Oboes,2
51 | Early Romantic orchestra,Woodwinds,Oboes,2
52 | Late Romantic orchestra,Woodwinds,Oboes,3
53 | Modern orchestra,Woodwinds,Oboes,4
54 | Late Romantic orchestra,Keyboards,Piano,1
55 | Modern orchestra,Keyboards,Piano,1
56 | Early Romantic orchestra,Woodwinds,Piccolo,1
57 | Late Romantic orchestra,Woodwinds,Piccolo,1
58 | Modern orchestra,Keyboards,Pipe organ,1
59 | Early Romantic orchestra,Percussion,Snare Drum,1
60 | Late Romantic orchestra,Percussion,Snare Drum,1
61 | Modern orchestra,Percussion,Snare Drum,1
62 | Late Romantic orchestra,Percussion,Tam-tam,1
63 | Modern orchestra,Percussion,Tam-tam,1
64 | Early Romantic orchestra,Percussion,Tambourine,1
65 | Late Romantic orchestra,Percussion,Tambourine,1
66 | Modern orchestra,Percussion,Tambourine,1
67 | Modern orchestra,Percussion,Tenor drum,1
68 | Classical orchestra,Percussion,Timpani,2
69 | Early Romantic orchestra,Percussion,Timpani,3
70 | Late Romantic orchestra,Percussion,Timpani,4
71 | Modern orchestra,Percussion,Timpani,1
72 | Early Romantic orchestra,Percussion,Triangle,1
73 | Late Romantic orchestra,Percussion,Triangle,1
74 | Modern orchestra,Percussion,Triangle,1
75 | Early Romantic orchestra,Brass,Trombones,3
76 | Late Romantic orchestra,Brass,Trombones,4
77 | Modern orchestra,Brass,Trombones,6
78 | Classical orchestra,Brass,Trumpets,2
79 | Early Romantic orchestra,Brass,Trumpets,2
80 | Late Romantic orchestra,Brass,Trumpets,4
81 | Modern orchestra,Brass,Trumpets,6
82 | Early Romantic orchestra,Brass,Tubas,1
83 | Late Romantic orchestra,Brass,Tubas,2
84 | Modern orchestra,Brass,Tubas,2
85 | Modern orchestra,Percussion,Tubular bells,1
86 | Modern orchestra,Percussion,Vibraphone,1
87 | Classical orchestra,Strings,Violas,4
88 | Early Romantic orchestra,Strings,Violas,10
89 | Late Romantic orchestra,Strings,Violas,12
90 | Modern orchestra,Strings,Violas,14
91 | Classical orchestra,Strings,Violins 1,6
92 | Early Romantic orchestra,Strings,Violins 1,14
93 | Late Romantic orchestra,Strings,Violins 1,16
94 | Modern orchestra,Strings,Violins 1,18
95 | Classical orchestra,Strings,Violins 2,6
96 | Early Romantic orchestra,Strings,Violins 2,12
97 | Late Romantic orchestra,Strings,Violins 2,14
98 | Modern orchestra,Strings,Violins 2,16
99 | Late Romantic orchestra,Brass,Wagner Tuba,1
100 | Modern orchestra,Percussion,Wood block,1
101 | Late Romantic orchestra,Percussion,Xylophone,1
102 | Modern orchestra,Percussion,Xylophone,1
103 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import isPlainObject from "lodash/isPlainObject"
2 | import isString from "lodash/isString"
3 | import isNumber from "lodash/isNumber"
4 | import get from "lodash/get"
5 | import { formatLocale } from "d3-format"
6 |
7 | export class RawGraphsError extends Error {
8 | constructor(message) {
9 | super(message)
10 | this.name = "RawGraphsError"
11 | this.message = message
12 | }
13 | }
14 |
15 | export class ValidationError extends Error {
16 | constructor(errors) {
17 | super("validation error")
18 | this.name = "ValidationError"
19 |
20 | this.message = Object.values(errors).join("\n")
21 | this.errors = errors
22 | }
23 | }
24 |
25 | export function getType(dataType) {
26 | if (isPlainObject(dataType)) {
27 | return getType(dataType.type)
28 | }
29 |
30 | if (isString(dataType)) {
31 | switch (dataType.toLowerCase()) {
32 | case "string":
33 | return String
34 | case "number":
35 | return Number
36 | case "boolean":
37 | return Boolean
38 | case "date":
39 | return Date
40 |
41 | default:
42 | return String
43 | }
44 | }
45 |
46 | return dataType
47 | }
48 |
49 | export function getTypeName(dataType) {
50 | const type = getType(dataType)
51 | return type && type.name ? type.name.toLowerCase() : undefined
52 | }
53 |
54 | // taken from: https://observablehq.com/@mbostock/localized-number-parsing
55 | export class LocaleNumberParser {
56 | constructor(locale) {
57 | const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)
58 | const numerals = [
59 | ...new Intl.NumberFormat(locale, { useGrouping: false }).format(
60 | 9876543210
61 | ),
62 | ].reverse()
63 | const index = new Map(numerals.map((d, i) => [d, i]))
64 | this._group =
65 | group ||
66 | new RegExp(`[${parts.find((d) => d.type === "group").value}]`, "g")
67 | this._decimal = new RegExp(
68 | `[${parts.find((d) => d.type === "decimal").value}]`
69 | )
70 | this._numeral = new RegExp(`[${numerals.join("")}]`, "g")
71 | this._index = (d) => index.get(d)
72 | }
73 | parse(string) {
74 | return (string = string
75 | .trim()
76 | .replace(this._group, "")
77 | .replace(this._decimal, ".")
78 | .replace(this._numeral, this._index))
79 | ? +string
80 | : NaN
81 | }
82 | }
83 |
84 | export class NumberParser {
85 | constructor({ locale, decimal, group, numerals }, useLocale = false) {
86 | const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)
87 | const defaultGroup = ""
88 | const defaultDecimal = "."
89 |
90 | this.numerals =
91 | numerals ||
92 | Array.from(
93 | new Intl.NumberFormat(locale, { useGrouping: false }).format(9876543210)
94 | ).reverse()
95 | this.group =
96 | group ||
97 | (useLocale ? parts.find((d) => d.type === "group").value : defaultGroup)
98 | this.decimal =
99 | decimal ||
100 | (useLocale
101 | ? parts.find((d) => d.type === "decimal").value
102 | : defaultDecimal)
103 |
104 | const index = new Map(this.numerals.map((d, i) => [d, i]))
105 |
106 | //#todo: infer from locale in NumberParser
107 | const groupingChars = 3
108 |
109 | this._groupRegexp = new RegExp(
110 | `[${this.group}}](\\d{${groupingChars}})`,
111 | "g"
112 | )
113 | this._decimalRegexp = new RegExp(`[${this.decimal}]`)
114 | this._numeralRegexp = new RegExp(`[${this.numerals.join("")}]`, "g")
115 | this._index = (d) => index.get(d)
116 |
117 | this.formatter = formatLocale({
118 | decimal: this.decimal,
119 | grouping: [groupingChars],
120 | thousands: this.group,
121 | numerals: this.numerals,
122 | }).format(",")
123 | }
124 |
125 | parse(string) {
126 | if (isNumber(string)) {
127 | return string
128 | }
129 |
130 | const trimmedString = string.trim ? string.trim() : string.toString().trim()
131 | const parsed = trimmedString
132 | .replace(this._groupRegexp, function (match, captured) {
133 | return captured
134 | })
135 | .replace(this._decimalRegexp, ".")
136 | .replace(this._numeralRegexp, this._index)
137 |
138 | let out = parsed ? +parsed : NaN
139 | return out
140 | }
141 |
142 | format(n) {
143 | return this.formatter(n)
144 | }
145 | }
146 |
147 | // https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
148 | export function mergeStyles(target, source) {
149 | // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
150 | for (const key of Object.keys(source)) {
151 | if (source[key] instanceof Object)
152 | Object.assign(source[key], mergeStyles(target[key], source[key]))
153 | }
154 |
155 | // Join `target` and modified `source`
156 | Object.assign(target || {}, source)
157 | return target
158 | }
159 |
--------------------------------------------------------------------------------
/src/legend.js:
--------------------------------------------------------------------------------
1 | import * as d3Legend from "d3-svg-legend"
2 | import { format } from "d3-format"
3 |
4 | function scaleType(scale) {
5 | if (scale.interpolate) {
6 | return "continuous"
7 | } else if (scale.interpolator) {
8 | return "sequential"
9 | } else if (scale.invertExtent) {
10 | return "other"
11 | } else {
12 | return "ordinal"
13 | }
14 | }
15 |
16 | export function legend(
17 | legendColor,
18 | legendSize,
19 | legendWidth = 200,
20 | shapePadding = 5,
21 | shapeWidth = 15,
22 | shapeHeight = 15,
23 | margin = { top: 0, right: 5, bottom: 0, left: 5 }
24 | ) {
25 | const legendFn = (_selection) => {
26 | let d3LegendSize, d3legendColor
27 | const w = legendWidth - margin.left - margin.right
28 |
29 | const legendContainer = _selection
30 | .append("g")
31 | .attr("transform", `translate(${margin.left},${0})`)
32 |
33 | //draw size scale
34 | if (legendSize && legendSize.title) {
35 | legendContainer
36 | .append("g")
37 | .attr("class", "legendSize")
38 | .attr("transform", `translate(0,${margin.top})`)
39 |
40 | let d3LegendSize = d3Legend
41 | .legendSize()
42 | .scale(legendSize.scale)
43 | .cells(legendSize.scale.domain())
44 | .shape(legendSize.shape ? legendSize.shape : "circle")
45 | .title(legendSize.title)
46 | .titleWidth(w)
47 | .labelWrap(w - shapePadding - shapeWidth)
48 | .labelOffset(5)
49 | .shapePadding(
50 | legendSize.shape === "circle"
51 | ? legendSize.scale.range()[1]
52 | : shapePadding
53 | )
54 |
55 | legendContainer.select(".legendSize").call(d3LegendSize)
56 | }
57 | //draw color scale
58 | if (legendColor && legendColor.title) {
59 | const legendColorHeight = legendContainer.select(".legendSize").empty()
60 | ? 0
61 | : legendContainer.select(".legendSize").node().getBBox().height + 20
62 |
63 | legendContainer
64 | .append("g")
65 | .attr("class", "legendColor")
66 | .attr("transform", "translate(0," + legendColorHeight + ")")
67 |
68 | d3legendColor = d3Legend
69 | .legendColor()
70 | .shapePadding(shapePadding)
71 | .title(legendColor.title)
72 | .titleWidth(w)
73 | .labelWrap(w - shapePadding - shapeWidth)
74 | .labelOffset(5)
75 | .scale(legendColor.scale)
76 |
77 | if (scaleType(legendColor.scale) !== "ordinal") {
78 | d3legendColor
79 | .shapePadding(0)
80 | .orient("horizontal")
81 | .shapeWidth(1)
82 | .shapeHeight(10)
83 | .cells(w)
84 | .classPrefix("horizontal-")
85 | .labelAlign("start")
86 | .labels(({ i, genLength, generatedLabels, domain }) => {
87 | if (i === 0 || i === genLength - 1) {
88 | return generatedLabels[i]
89 | }
90 | if (domain.length === 3 && i === genLength / 2 - 1) {
91 | return format(".01f")((domain[0] + domain[2]) / 2)
92 | }
93 | })
94 | }
95 |
96 | legendContainer.select(".legendColor").call(d3legendColor)
97 | }
98 |
99 | //Hardcore style with much love
100 | legendContainer
101 | .selectAll("text")
102 | .attr("font-family", '"Arial", sans-serif')
103 | .attr("font-size", "10px")
104 |
105 | legendContainer
106 | .selectAll(".legendTitle")
107 | .attr("font-size", "12px")
108 | .attr("font-weight", "bold")
109 |
110 | legendContainer
111 | .selectAll(".horizontal-legendTitle")
112 | .attr("font-size", "12px")
113 | .attr("font-weight", "bold")
114 |
115 | legendContainer
116 | .selectAll(".horizontal-cell text")
117 | .style("text-anchor", "middle")
118 | .attr("text-anchor", "middle")
119 |
120 | legendContainer
121 | .selectAll(".horizontal-cell:first-of-type text")
122 | .style("text-anchor", "start")
123 | .attr("text-anchor", "start")
124 |
125 | legendContainer
126 | .selectAll(".horizontal-cell:last-of-type text")
127 | .style("text-anchor", "end")
128 | .attr("text-anchor", "end")
129 |
130 | legendContainer
131 | .selectAll(".legendSize circle")
132 | .attr("fill", "none")
133 | .attr("stroke", "#ccc")
134 |
135 | legendContainer
136 | .selectAll(".legendSize rect")
137 | .attr("fill", "none")
138 | .attr("stroke", "#ccc")
139 | }
140 |
141 | legendFn.addColor = function (_title, _scale) {
142 | if (!arguments.length) return legendColor
143 |
144 | legendColor = { title: _title, scale: _scale }
145 | return legendFn
146 | }
147 |
148 | legendFn.addSize = function (_title, _scale, _shape) {
149 | if (!arguments.length) return legendSize
150 | legendSize = {
151 | title: _title,
152 | scale: _scale,
153 | shape: _shape,
154 | }
155 | return legendFn
156 | }
157 |
158 | legendFn.legendWidth = function (_legendWidth) {
159 | if (!arguments.length) return legendWidth
160 | legendWidth = _legendWidth
161 | return legendFn
162 | }
163 |
164 | return legendFn
165 | }
166 |
--------------------------------------------------------------------------------
/src/expressionRegister.js:
--------------------------------------------------------------------------------
1 | import { RawGraphsError, getTypeName } from "./utils"
2 | import mean from "lodash/mean"
3 | import max from "lodash/max"
4 | import min from "lodash/min"
5 | import sum from "lodash/sum"
6 | import isFunction from "lodash/isFunction"
7 | import isString from "lodash/isString"
8 | import uniq from "lodash/uniq"
9 | import range from "lodash/range"
10 | import find from "lodash/find"
11 | import get from "lodash/get"
12 | import isPlainObject from "lodash/isPlainObject"
13 | import { median } from "d3-array"
14 | // import first from 'lodash/first'
15 | // import last from 'lodash/last'
16 |
17 | const aggregationsRegister = {}
18 |
19 | export function registerAggregation(name, fun) {
20 | aggregationsRegister[name] = fun
21 | }
22 |
23 | export function unregisterAggregation(name) {
24 | delete aggregationsRegister[name]
25 | }
26 |
27 | export function getAggregatorNames() {
28 | return Object.keys(aggregationsRegister)
29 | }
30 |
31 | export function getAggregator(aggregatorExpression) {
32 | if (isFunction(aggregatorExpression)) {
33 | return aggregatorExpression
34 | }
35 |
36 | if (isString(aggregatorExpression)) {
37 | if (aggregationsRegister[aggregatorExpression]) {
38 | return aggregationsRegister[aggregatorExpression]
39 | } else {
40 | throw new RawGraphsError(
41 | `Aggregator "${aggregatorExpression}" is is not registered in RawGraphs.`
42 | )
43 | }
44 | }
45 | }
46 |
47 | export function getAggregatorArray(aggregator, length) {
48 | return function (items) {
49 | return range(length).map((idx) => {
50 | const aggregatorExpression = Array.isArray(aggregator)
51 | ? get(aggregator, idx, aggregator[0])
52 | : aggregator
53 | const aggr = getAggregator(aggregatorExpression)
54 | return aggr(items.map((i) => i[idx]))
55 | })
56 | }
57 | }
58 |
59 | // Aggregators available in RAW
60 | // general purpose
61 | registerAggregation("count", (items) => items.length)
62 | registerAggregation("countDistinct", (items) => uniq(items).length)
63 | // #TODO understand if we must add these
64 | // registerAggregation("last", last)
65 | // registerAggregation("first", first)
66 |
67 | // numbers
68 | registerAggregation("mean", mean)
69 | registerAggregation("max", max)
70 | registerAggregation("min", min)
71 | registerAggregation("sum", sum)
72 | registerAggregation("median", median)
73 |
74 | //string
75 | const commaSeparated = (items) => items.join(",")
76 | // #TODO understand if we must add these
77 | // const tabSeparated = items => items.join("\t")
78 | // const newLineSeparated = items => items.join("\n")
79 | // const itemsList = items => items
80 | // const itemsUniq = items => uniq(items)
81 |
82 | registerAggregation("csv", commaSeparated)
83 | registerAggregation("csvDistinct", (items) => commaSeparated(uniq(items)))
84 | // #TODO understand if we must add these
85 | // registerAggregation("commaSeparated", commaSeparated)
86 | // registerAggregation("tsv", tabSeparated)
87 | // registerAggregation("tsvDistinct", items => tabSeparated(uniq(items)))
88 | // registerAggregation("tabSeparated", tabSeparated)
89 | // registerAggregation("newLineSeparated", newLineSeparated)
90 | // registerAggregation("list", itemsList)
91 | // registerAggregation("distinct", itemsUniq)
92 |
93 | export function getDefaultDimensionAggregation(dimension, dataType) {
94 | if (!dimension.aggregation) {
95 | throw new RawGraphsError(`Dimension ${dimension.id} is not aggregable`)
96 | }
97 | const names = getAggregatorNames()
98 |
99 | const typeName = getTypeName(dataType)
100 | const defaultAggregation = get(dimension, "aggregationDefault")
101 |
102 | //#TODO check that default aggregation exists in registered ones
103 | if (defaultAggregation) {
104 | if (isPlainObject(defaultAggregation)) {
105 | return get(defaultAggregation, typeName, names[0])
106 | } else {
107 | return defaultAggregation
108 | }
109 | }
110 | return names[0]
111 | }
112 |
113 | export function getDimensionAggregator(
114 | dimensionId,
115 | mapping,
116 | dataTypes,
117 | dimensions
118 | ) {
119 | const dimension = find(dimensions, (x) => x.id === dimensionId)
120 |
121 | const mappingValue = get(
122 | mapping[dimensionId],
123 | "value",
124 | dimension.multiple ? [] : undefined
125 | )
126 |
127 | //#TODO: this is done to return function returning a scalar in any case
128 | // works well with undefined "size" dimensions (See matrix plot at rawgraphs-charts at commit 04013f633e32f4c630a5db2b855c6cf270b3af03),
129 | // but this needs investigation
130 | if (!dimension.multiple && !mappingValue) {
131 | return () => 1
132 | }
133 |
134 | function getSingleDim(dimension, columnName, index) {
135 | const dataType = get(dataTypes, columnName)
136 | const defaultAggregation = getDefaultDimensionAggregation(
137 | dimension,
138 | dataType
139 | )
140 | let aggregation = get(
141 | mapping[dimension.id],
142 | "config.aggregation",
143 | defaultAggregation
144 | )
145 | if (index !== undefined) {
146 | aggregation = aggregation[index]
147 | }
148 | const aggregator = getAggregator(aggregation)
149 | return aggregator
150 | }
151 |
152 | if (Array.isArray(mappingValue)) {
153 | const out = mappingValue.map((columnName, i) =>
154 | getSingleDim(dimension, columnName, i)
155 | )
156 | return out
157 | } else {
158 | return getSingleDim(dimension, mappingValue)
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/website/static/img/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/__tests__/mapper.test.js:
--------------------------------------------------------------------------------
1 | import fs from "fs"
2 | import makeMapper, { validateMapping } from "../mapping"
3 | import { tsvParse } from "d3-dsv"
4 | import { RAWError } from "../utils"
5 | import { registerAggregation, getAggregatorNames } from "../expressionRegister"
6 | import uniq from "lodash/uniq"
7 |
8 | var titanic = fs.readFileSync("data/titanic.tsv", "utf8")
9 |
10 | const x = {
11 | id: "x",
12 | name: "x",
13 | validTypes: ["number", "date"],
14 | required: true,
15 | operation: "get",
16 | }
17 |
18 | const y = {
19 | id: "y",
20 | name: "y",
21 | validTypes: ["number", "date"],
22 | required: true,
23 | operation: "get",
24 | }
25 |
26 | const groupAgg = {
27 | id: "groupAgg",
28 | name: "groupAgg",
29 | validTypes: ["number", "date"],
30 | required: true,
31 | operation: "groupAggregate",
32 | multiple: true,
33 | }
34 |
35 | const group = {
36 | id: "group",
37 | name: "group",
38 | validTypes: ["number", "date"],
39 | required: true,
40 | operation: "group",
41 | multiple: true,
42 | }
43 |
44 | const dispersionDimensions = [x, y]
45 | const groupAggregateDimensions = [groupAgg, x, y]
46 | const groupDimensions = [group, x, y]
47 |
48 | let testData = tsvParse(titanic)
49 | testData = testData.slice(0, 10)
50 |
51 | const itemsUniq = (items) => uniq(items)
52 | registerAggregation("distinct", itemsUniq)
53 |
54 | const dispersionMapping = {
55 | x: {
56 | value: "Age",
57 | },
58 | y: {
59 | value: "Fare",
60 | },
61 | }
62 |
63 | const groupAggregateMapping = {
64 | x: {
65 | value: "Fare",
66 | config: {
67 | // aggregation: rows => mean(rows.map(x => +x))
68 | aggregation: "mean",
69 | },
70 | },
71 | y: {
72 | value: "Age",
73 | },
74 | groupAgg: {
75 | value: ["Gender", "Destination"],
76 | },
77 | }
78 |
79 | const groupMapping = {
80 | x: {
81 | value: "Age",
82 | },
83 | y: {
84 | value: "Fare",
85 | },
86 | group: {
87 | value: ["Gender", "Destination"],
88 | },
89 | }
90 |
91 | describe("makeMapper", () => {
92 | it("should perform some mappings", () => {
93 | const mappingFunctionDispersion = makeMapper(
94 | dispersionDimensions,
95 | dispersionMapping
96 | )
97 | const mappedDataDispersion = mappingFunctionDispersion(testData)
98 |
99 | // console.log(mappedDataDispersion)
100 |
101 | const mappingFunctionGroupAggregate = makeMapper(
102 | groupAggregateDimensions,
103 | groupAggregateMapping
104 | )
105 | const mappedDataGroupAggregate = mappingFunctionGroupAggregate(testData)
106 |
107 | // console.log(mappedDataGroupAggregate)
108 |
109 | const mappingFunctionGroup = makeMapper(groupDimensions, groupMapping)
110 | const mappedDataGroup = mappingFunctionGroup(testData)
111 | })
112 |
113 | it("throw an error if a required dimension is not set", () => {
114 | const requiredException = {
115 | y: {
116 | value: "Fare",
117 | },
118 | group: {
119 | value: ["Gender", "Destination"],
120 | },
121 | }
122 | expect(() => {
123 | validateMapping(groupDimensions, requiredException)
124 | makeMapper(groupDimensions, requiredException)
125 | }).toThrow(RAWError)
126 | })
127 |
128 | it("throw an error if multiple is not set on dimension x", () => {
129 | const groupMultipleException = {
130 | x: {
131 | value: ["Age", "Fare"],
132 | },
133 | y: {
134 | value: "Fare",
135 | },
136 | group: {
137 | value: ["Gender", "Destination"],
138 | },
139 | }
140 | expect(() => {
141 | validateMapping(groupDimensions, groupMultipleException)
142 | //makeMapper(groupDimensions, groupMultipleException);
143 | }).toThrow(RAWError)
144 | })
145 |
146 | it("throw an error if minValues and maxValues are not ok", () => {
147 | const testMappingMinMax = [
148 | {
149 | id: "x",
150 | name: "x",
151 | validTypes: ["number", "date"],
152 | required: true,
153 | operation: "get",
154 | multiple: true,
155 | minValues: 3,
156 | maxValues: 4,
157 | },
158 | ]
159 |
160 | const testMappingMinMaxExceptionMin = {
161 | x: {
162 | value: ["Gender", "Destination"],
163 | },
164 | }
165 | expect(() => {
166 | validateMapping(testMappingMinMax, testMappingMinMaxExceptionMin)
167 | //makeMapper(testMappingMinMax, testMappingMinMaxExceptionMin);
168 | }).toThrow(RAWError)
169 |
170 | const testMappingMinMaxExceptionMax = {
171 | x: {
172 | value: ["Gender", "Destination", "Age", "Fare", "Survival"],
173 | },
174 | }
175 | expect(() => {
176 | validateMapping(testMappingMinMax, testMappingMinMaxExceptionMax)
177 | makeMapper(testMappingMinMax, testMappingMinMaxExceptionMax)
178 | }).toThrow(RAWError)
179 | })
180 |
181 | it("tests rollup", () => {
182 | const rollupConfig = [
183 | {
184 | id: "group",
185 | name: "group",
186 | required: true,
187 | operation: "rollup",
188 | multiple: true,
189 | },
190 | ]
191 |
192 | const rollupMapping = {
193 | group: {
194 | value: ["Gender"],
195 | },
196 | }
197 |
198 | const rollupMapper = makeMapper(rollupConfig, rollupMapping)
199 | const rolledUpData = rollupMapper(testData)
200 |
201 | const rollupMappingLeaf = {
202 | group: {
203 | value: ["Gender"],
204 | config: {
205 | leafAggregation: ["distinct", "Port of Embarkation"],
206 | },
207 | },
208 | }
209 | const rollupMapperLeaf = makeMapper(rollupConfig, rollupMappingLeaf)
210 | const rolledUpDataLeaf = rollupMapperLeaf(testData)
211 | })
212 |
213 | const rollupWithLeafConfig = [
214 | {
215 | id: "group",
216 | name: "group",
217 | required: true,
218 | operation: "rollup",
219 | multiple: true,
220 | },
221 | {
222 | id: "groupLeaf",
223 | name: "groupLeaf",
224 | required: true,
225 | operation: "rollupLeaf",
226 | },
227 | ]
228 | const rollupMappingWithLeaf = {
229 | group: {
230 | value: ["Gender"],
231 | },
232 | groupLeaf: {
233 | value: "Port of Embarkation",
234 | config: { aggregation: "distinct" },
235 | },
236 | }
237 |
238 | const rollupMapperWithLeaf = makeMapper(
239 | rollupWithLeafConfig,
240 | rollupMappingWithLeaf
241 | )
242 | const rolledUpDataWithLeafData = rollupMapperWithLeaf(testData)
243 | })
244 |
--------------------------------------------------------------------------------
/src/colors.js:
--------------------------------------------------------------------------------
1 | import * as d3Color from "d3-color"
2 | import * as d3ScaleChromatic from "d3-scale-chromatic"
3 | import { scaleDiverging, scaleSequential, scaleOrdinal } from "d3-scale"
4 | import { min, max, extent } from "d3-array"
5 | import isEqual from "lodash/isEqual"
6 | import get from "lodash/get"
7 | import { quantize, interpolateRgbBasis } from "d3-interpolate"
8 | import uniqBy from "lodash/uniqBy"
9 | import { getValueType } from "./dataset"
10 | import { RawGraphsError } from "./utils"
11 |
12 | const NO_COLOR = "#cccccc"
13 |
14 | const sequential = {
15 | interpolateBlues: {
16 | value: d3ScaleChromatic.interpolateBlues,
17 | label: "Blues (sequential)",
18 | },
19 | interpolateGreens: {
20 | value: d3ScaleChromatic.interpolateGreens,
21 | label: "Greens (sequential)",
22 | },
23 | interpolateReds: {
24 | value: d3ScaleChromatic.interpolateReds,
25 | label: "Reds (sequential)",
26 | },
27 | }
28 |
29 | const diverging = {
30 | interpolateRdBu: {
31 | value: d3ScaleChromatic.interpolateRdBu,
32 | label: "RdBu (diverging)",
33 | },
34 | interpolateBrBG: {
35 | value: d3ScaleChromatic.interpolateBrBG,
36 | label: "BrBG (diverging)",
37 | },
38 | interpolatePiYG: {
39 | value: d3ScaleChromatic.interpolatePiYG,
40 | label: "PiYG (diverging)",
41 | },
42 | }
43 |
44 | const ordinal = {
45 | schemeCategory10: {
46 | value: d3ScaleChromatic.schemeCategory10,
47 | label: "Category10 (ordinal)",
48 | },
49 | interpolateTurbo: {
50 | value: d3ScaleChromatic.interpolateTurbo,
51 | label: "Interpolate Turbo (ordinal)",
52 | },
53 | interpolateSpectral: {
54 | value: d3ScaleChromatic.interpolateSpectral,
55 | label: "Interpolate Spectral (ordinal)",
56 | },
57 | }
58 | /**
59 | * @constant
60 | * @description Color presets objects
61 | */
62 | export const colorPresets = {
63 | sequential,
64 | diverging,
65 | ordinal,
66 | }
67 |
68 | /**
69 | * @constant
70 | * @description Scale types (names)
71 | */
72 | export const scaleTypes = Object.keys(colorPresets)
73 |
74 | /**
75 | *
76 | * @param {*} scaleType
77 | * @param {*} domain
78 | * @param {*} interpolator
79 | * @returns {function} a d3 scale
80 | */
81 | export function getPresetScale(scaleType, domain, interpolator) {
82 | if (scaleType === "sequential") {
83 | if (!colorPresets.sequential[interpolator]) {
84 | throw new RawGraphsError(
85 | `interpolator ${interpolator} not valid for sequential scaletype`
86 | )
87 | }
88 | return scaleSequential(colorPresets.sequential[interpolator].value)
89 | .domain(domain)
90 | .unknown(NO_COLOR)
91 | .clamp(true)
92 | } else if (scaleType === "diverging") {
93 | if (!colorPresets.diverging[interpolator]) {
94 | throw new RawGraphsError(
95 | `interpolator ${interpolator} not valid for diverging scaletype`
96 | )
97 | }
98 | return scaleDiverging(colorPresets.diverging[interpolator].value)
99 | .domain(domain)
100 | .unknown(NO_COLOR)
101 | .clamp(true)
102 | } else {
103 | if (!colorPresets.ordinal[interpolator]) {
104 | throw new RawGraphsError(
105 | `interpolator ${interpolator} not valid for ordinal scaletype`
106 | )
107 | }
108 | const interpolatorValue = colorPresets.ordinal[interpolator].value
109 | let scaleRange = Array.isArray(interpolatorValue)
110 | ? interpolatorValue
111 | : quantize(interpolatorValue, domain.length)
112 |
113 | let finalDomain = domain
114 |
115 | if (scaleRange.length < domain.length) {
116 | finalDomain = domain.slice(0, scaleRange.length)
117 | }
118 |
119 | return scaleOrdinal()
120 | .domain(finalDomain)
121 | .range(scaleRange)
122 | .unknown(NO_COLOR)
123 | }
124 | }
125 |
126 | /**
127 | * Extracts the color domain, given a color dataset, a color data type and a scale type
128 | * for sequential scales will return 2 points domain (min and max values)
129 | * for diverging scales will have 3 points domain (min value, mid value and max value)
130 | * for ordinal scales the domain consists of all unique values found in the color dataset
131 | * @param {*} colorDataset
132 | * @param {*} colorDataType
133 | * @param {*} scaleType
134 | * @returns {Array}
135 | */
136 | export function getColorDomain(colorDataset, colorDataType, scaleType) {
137 | const sample = get(colorDataset, "[0]")
138 | const sampleDataType =
139 | sample !== undefined ? getValueType(sample) : colorDataType
140 | if (sampleDataType === "string" || scaleType === "ordinal") {
141 | return uniqBy([...colorDataset], (item) => item && item.toString()).sort()
142 | } else {
143 | const typedDataset = colorDataset
144 | if (scaleType === "diverging") {
145 | const minValue = min(typedDataset)
146 | const maxValue = max(typedDataset)
147 | let midValue = 0
148 | if (sampleDataType === "date") {
149 | midValue = new Date((minValue.getTime() + maxValue.getTime()) / 2)
150 | } else {
151 | midValue = (minValue + maxValue) / 2
152 | }
153 |
154 | return [minValue, midValue, maxValue]
155 | } else {
156 | return extent(typedDataset)
157 | }
158 | }
159 | }
160 |
161 | function finalizeScale(inputScale, userScaleValuesMapped, scaleType) {
162 | if (
163 | inputScale.range &&
164 | isEqual(
165 | inputScale.range().map((d) => d3Color.color(d).formatHex()),
166 | userScaleValuesMapped.range
167 | )
168 | ) {
169 | return inputScale.copy().domain(userScaleValuesMapped.domain)
170 | } else {
171 | if (scaleType === "ordinal") {
172 | return inputScale
173 | .copy()
174 | .domain(userScaleValuesMapped.domain)
175 | .range(userScaleValuesMapped.range)
176 | } else {
177 | return inputScale
178 | .copy()
179 | .domain(userScaleValuesMapped.domain)
180 | .interpolator(interpolateRgbBasis(userScaleValuesMapped.range))
181 | }
182 | }
183 | }
184 |
185 | function getUserScaleValuesMapped(userScaleValues) {
186 | return {
187 | range: userScaleValues.map((item) => item.range),
188 | domain: userScaleValues.map((item) => item.domain),
189 | }
190 | }
191 |
192 | /**
193 | * Compute the initial ranges and domains, given a domain, a scale type and an interpolator. Used to initialize the values that can be overridden by the user
194 | * @param {*} domain
195 | * @param {*} scaleType
196 | * @param {*} interpolator
197 | * @returns {Array.