) => mixed) => void,
45 | cancel: (fn: () => void) => void,
46 | show: () => mixed,
47 | close: () => mixed
48 | }
49 |
50 | class DWDatasetModal extends PureComponent {
51 | datasetSelector: DatasetSelector
52 |
53 | componentDidMount() {
54 | this.datasetSelector = new window.dataworldWidgets.DatasetSelector({
55 | client_id: CLIENT_ID,
56 | linkText: 'Select',
57 | resourceFilter: this.props.limitToProjects ? 'project' : undefined
58 | })
59 |
60 | this.datasetSelector.success(selectedDatasets => {
61 | const [dataset] = selectedDatasets
62 | if (dataset) {
63 | this.props.onSelect(dataset)
64 | } else {
65 | this.props.onCancel()
66 | }
67 | })
68 |
69 | this.datasetSelector.cancel(() => {
70 | this.props.onCancel()
71 | })
72 |
73 | // Shows the dataset selector
74 | this.datasetSelector.show()
75 | }
76 | componentWillUnmount() {
77 | this.datasetSelector.close()
78 | }
79 | render() {
80 | return null
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/CopyField.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | /* eslint no-unused-vars: ["warn", { "args": "after-used" }] */
3 | import React, { Component } from 'react'
4 | import {
5 | FormGroup,
6 | InputGroup,
7 | FormControl,
8 | Button,
9 | Tooltip,
10 | Overlay
11 | } from 'react-bootstrap'
12 | import { decorate, observable } from 'mobx'
13 | import { CopyToClipboard } from 'react-copy-to-clipboard'
14 | import { observer } from 'mobx-react'
15 |
16 | class CopyField extends Component<{ getValue: () => string }> {
17 | copied: null | string = null
18 | value: string = this.props.getValue()
19 |
20 | copyButton: ?Button
21 |
22 | handleCopy = (text: string, result: boolean) => {
23 | this.copied = result ? 'Copied!' : 'Ctrl+C to copy'
24 | this.input && this.input.select()
25 | setTimeout(() => (this.copied = null), 700)
26 | }
27 |
28 | input: ?HTMLInputElement
29 | handleInputRef = (r: HTMLInputElement) => {
30 | this.input = r
31 | if (r) {
32 | r.select()
33 | }
34 | }
35 |
36 | render() {
37 | const { value } = this
38 |
39 | const copiedTooltip = this.copied != null && (
40 |
41 | {this.copied}
42 |
43 | )
44 |
45 | return (
46 |
47 |
48 |
54 |
55 |
56 |
59 |
60 |
61 | {this.copied != null && (
62 | this.copyButton}
67 | >
68 | {copiedTooltip}
69 |
70 | )}
71 |
72 |
73 | )
74 | }
75 | }
76 |
77 | decorate(CopyField, {
78 | copied: observable,
79 | value: observable
80 | })
81 |
82 | export default observer(CopyField)
83 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chart-builder",
3 | "version": "0.1.0",
4 | "private": true,
5 | "author": "data.world (https://data.world/)",
6 | "homepage": "https://chart-builder.data.world",
7 | "repository": {
8 | "type": "git",
9 | "url": "github:datadotworld/chart-builder"
10 | },
11 | "license": "Apache-2.0",
12 | "dependencies": {
13 | "classnames": "2.2.6",
14 | "filepicker-js": "2.4.18",
15 | "filesize": "3.6.1",
16 | "flow-bin": "0.80.0",
17 | "history": "4.7.2",
18 | "little-loader": "0.2.0",
19 | "lz-string": "1.4.4",
20 | "mobx": "4.3.1",
21 | "mobx-react": "5.2.6",
22 | "mobx-state-tree": "3.2.4",
23 | "react": "16.4.2",
24 | "react-bootstrap": "0.32.3",
25 | "react-copy-to-clipboard": "5.0.1",
26 | "react-dom": "16.4.2",
27 | "react-draggable": "3.0.5",
28 | "react-measure": "3.0.0-rc.3",
29 | "react-monaco-editor": "0.14.1",
30 | "react-router-dom": "4.3.1",
31 | "react-scripts": "^5.0.1",
32 | "react-select": "2.0.0",
33 | "workbox-background-sync": "^6.6.0",
34 | "workbox-broadcast-update": "^6.6.0",
35 | "workbox-cacheable-response": "^6.5.4",
36 | "workbox-core": "^6.6.0",
37 | "workbox-expiration": "^6.6.0",
38 | "workbox-google-analytics": "^6.6.1",
39 | "workbox-navigation-preload": "^6.6.0",
40 | "workbox-precaching": "^6.6.0",
41 | "workbox-range-requests": "^6.6.0",
42 | "workbox-routing": "^6.6.0",
43 | "workbox-strategies": "^6.6.0",
44 | "workbox-streams": "^6.6.0",
45 | "vega": "5.28.0",
46 | "vega-lite": "5.18.0",
47 | "vega-tooltip": "0.34.0"
48 | },
49 | "scripts": {
50 | "start": "react-scripts start",
51 | "dev": "react-scripts start",
52 | "build": "react-scripts build",
53 | "test": "react-scripts test",
54 | "eject": "react-scripts eject",
55 | "flow": "flow",
56 | "precommit": "pretty-quick --staged"
57 | },
58 | "devDependencies": {
59 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
60 | "cypress": "13.8.1",
61 | "fetch-mock": "6.5.2",
62 | "http-server": "0.11.1",
63 | "husky": "0.14.3",
64 | "mobx-react-devtools": "6.0.3",
65 | "prettier": "1.14.2",
66 | "pretty-quick": "1.6.0",
67 | "react-test-renderer": "16.4.2"
68 | },
69 | "prettier": {
70 | "semi": false,
71 | "singleQuote": true
72 | },
73 | "browserslist": {
74 | "development": [
75 | "last 2 chrome versions",
76 | "last 2 firefox versions",
77 | "last 2 edge versions"
78 | ],
79 | "production": [
80 | ">1%",
81 | "last 4 versions",
82 | "Firefox ESR",
83 | "not ie < 11"
84 | ]
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart Builder | data.world
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/GlobalOptions.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component } from 'react'
3 | import { FormControl, FormGroup, InputGroup, HelpBlock } from 'react-bootstrap'
4 | import { observer, inject } from 'mobx-react'
5 | import classes from './GlobalOptions.module.css'
6 |
7 | import type { StoreType } from '../util/Store'
8 |
9 | type Props = {
10 | store: StoreType
11 | }
12 |
13 | function getVal(val: string): null | number {
14 | // allow backspace to reset to auto
15 | if (val === '') return null
16 | return parseInt(val, 10)
17 | }
18 |
19 | class GlobalOptions extends Component {
20 | render() {
21 | const { store } = this.props
22 | return (
23 |
24 |
25 |
26 |
27 | {
33 | const val = getVal(e.target.value)
34 | if (!isNaN(val)) {
35 | store.config.setDimensions(val, store.config.height)
36 | }
37 | }}
38 | />
39 | Width
40 |
41 |
42 |
53 |
54 |
55 | {
61 | const val = getVal(e.target.value)
62 | if (!isNaN(val)) {
63 | store.config.setDimensions(store.config.width, val)
64 | }
65 | }}
66 | />
67 | Height
68 |
69 |
70 |
71 |
91 | {measurements && measurements.container.height ? (
92 |
103 | ) : null}
104 |
105 | )}
106 |
107 | )
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/components/DatasetSelector.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component } from 'react'
3 | import { decorate, observable } from 'mobx'
4 | import { observer } from 'mobx-react'
5 | import { FormGroup, InputGroup, FormControl, Button } from 'react-bootstrap'
6 | import { API_HOST } from '../util/constants'
7 | import DWDatasetModal, { type SelectedDatasetType } from './DWDatasetModal'
8 |
9 | type Props = {
10 | token: string,
11 | defaultValue: string,
12 | value: string,
13 | limitToProjects?: boolean,
14 | onChange: (id: string) => mixed
15 | }
16 |
17 | function toID(d: SelectedDatasetType) {
18 | return d.owner + '/' + d.id
19 | }
20 |
21 | class DatasetSelector extends Component {
22 | loadingInitial: boolean = true
23 | modalOpen: boolean = false
24 |
25 | componentDidMount() {
26 | this.setValueIfValid()
27 | }
28 |
29 | async setValueIfValid() {
30 | const { token, defaultValue, limitToProjects } = this.props
31 | if (!defaultValue) return
32 |
33 | try {
34 | const resp = await fetch(`${API_HOST}/v0/datasets/${defaultValue}`, {
35 | method: 'GET',
36 | headers: {
37 | Accept: 'application/json',
38 | Authorization: `Bearer ${token}`
39 | }
40 | })
41 | if (resp.ok) {
42 | const jsonResponse = await resp.json()
43 | if (
44 | jsonResponse.accessLevel === 'WRITE' ||
45 | jsonResponse.accessLevel === 'ADMIN'
46 | ) {
47 | if ((limitToProjects && jsonResponse.isProject) || !limitToProjects) {
48 | this.props.onChange(defaultValue)
49 | }
50 | }
51 | }
52 | } catch (e) {}
53 |
54 | this.loadingInitial = false
55 | }
56 |
57 | handleSelect = (d: SelectedDatasetType) => {
58 | this.props.onChange(toID(d))
59 | this.modalOpen = false
60 | }
61 |
62 | handleSelectClick = () => {
63 | this.modalOpen = true
64 | }
65 |
66 | handleCancel = () => {
67 | this.modalOpen = false
68 | }
69 |
70 | render() {
71 | const { limitToProjects } = this.props
72 | const value = this.loadingInitial
73 | ? 'Loading...'
74 | : this.props.value ||
75 | `Select ${limitToProjects ? 'project' : 'dataset/project'}`
76 |
77 | return (
78 | <>
79 |
80 |
81 |
82 |
83 |
90 |
91 |
92 |
93 | {this.modalOpen && (
94 |
99 | )}
100 |
101 | )
102 | }
103 | }
104 |
105 | decorate(DatasetSelector, {
106 | modalOpen: observable,
107 | loadingInitial: observable
108 | })
109 |
110 | export default observer(DatasetSelector)
111 |
--------------------------------------------------------------------------------
/src/components/__tests__/__snapshots__/Header.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders 1`] = `
4 |
68 | `;
69 |
70 | exports[`renders with dataset 1`] = `
71 |
144 | `;
145 |
--------------------------------------------------------------------------------
/src/components/VizEmpty.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component } from 'react'
3 | import classes from './VizEmpty.module.css'
4 |
5 | const svg = (
6 |
77 | )
78 |
79 | export default class VizEmpty extends Component<{}> {
80 | render() {
81 | return (
82 |
83 | {svg}
84 |
85 | Choose a chart type and columns
to the left and your chart will
86 | appear.
Like magic ✨
87 |
88 |
7 |
93 |
96 | Choose a chart type and columns
97 |
98 | to the left and your chart will appear.
99 |
100 | Like magic ✨
101 |
102 |
28 |
41 |
178 |