diff --git a/.travis.yml b/.travis.yml index 200d19f..80f0b5a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -20,18 +20,3 @@ jobs: - echo '{"name":"datasette-vega-latest","alias":"datasette-vega-latest.datasette.io"}' > build/now.json - cd build && now --name=datasette-vega-latest --token=$NOW_TOKEN - now alias --token=$NOW_TOKEN - - stage: release tagged version - if: tag IS present - language: python - python: 3.6 - script: - - pip install -U pip wheel - deploy: - - provider: pypi - user: simonw - distributions: bdist_wheel - password: ${PYPI_PASSWORD} - on: - branch: master - tags: true - repo: simonw/datasette-vega diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 261eeb9..0000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/README.md b/README.md index b634a87..3e93a82 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,3 @@ # datasette-vega -[![PyPI](https://img.shields.io/pypi/v/datasette-vega.svg)](https://pypi.org/project/datasette-vega/) -[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/simonw/datasette-vega/blob/master/LICENSE) - -A [Datasette](https://github.com/simonw/datasette) plugin that provides tools -for generating charts using [Vega](https://vega.github.io/). - -![Datasette Vega interface](https://raw.githubusercontent.com/simonw/datasette-vega/master/datasette-vega.png) - -Try out the latest master build as a live demo at https://datasette-vega-latest.datasette.io/ or try the latest release installed as a plugin at https://fivethirtyeight.datasettes.com/ - -To add this to your Datasette installation, install the plugin like so: - - pip install datasette-vega - -The plugin will then add itself to every Datasette table view. - -If you are publishing data using the `datasette publish` command, you can -include this plugin like so: - - datasette publish now mydatabase.db --install=datasette-vega +A [Datasette](https://github.com/simonw/datasette) plugin that provides tools for generating charts using [Vega](https://vega.github.io/). diff --git a/datasette-vega.png b/datasette-vega.png deleted file mode 100644 index 1546b2f..0000000 Binary files a/datasette-vega.png and /dev/null differ diff --git a/datasette_vega/__init__.py b/datasette_vega/__init__.py index ac80b52..ea03f63 100644 --- a/datasette_vega/__init__.py +++ b/datasette_vega/__init__.py @@ -1,28 +1,11 @@ from datasette import hookimpl -import glob -import os - -cache = {} -static_dir = os.path.join(os.path.dirname(__file__), "static") - - -def cached_filepaths_for_extension(extension): - pattern = os.path.join(static_dir, "*.{}".format(extension)) - if pattern not in cache: - cache[pattern] = [ - "/-/static-plugins/datasette_vega/{}".format(os.path.basename(g)) - for g in glob.glob(pattern) - ] - return cache[pattern] @hookimpl -def extra_css_urls(view_name): - if view_name == "table": - return cached_filepaths_for_extension("css") +def extra_css_urls(): + return ["/-/static-plugins/datasette_vega/datasette-vega.css"] @hookimpl -def extra_js_urls(view_name): - if view_name == "table": - return cached_filepaths_for_extension("js") +def extra_js_urls(): + return ["/-/static-plugins/datasette_vega/datasette-vega.js"] diff --git a/package.json b/package.json index 969c2a2..fdab351 100644 --- a/package.json +++ b/package.json @@ -3,28 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-scripts": "^4.0.3", - "vega-embed": "^6.20.5", - "vega-lib": "^4.4.0" + "react": "^16.4.1", + "react-dom": "^16.4.1", + "react-scripts": "1.1.4", + "source-map-explorer": "^1.5.0", + "vega-embed": "^3.15.0", + "vega-lib": "^4.0.0-rc.3" }, "scripts": { "start": "REACT_APP_STAGE=dev react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/public/index.html b/public/index.html index 2df60a7..c5bff9f 100644 --- a/public/index.html +++ b/public/index.html @@ -4,16 +4,15 @@ - Datasette Vega - -

Datasette Vega

-

Enter the URL of the JSON version of any Datasette table:

-
- - -

Examples: game_id/pts/team_id

+ + + + +
diff --git a/setup.py b/setup.py index 8dc8722..1d573b4 100644 --- a/setup.py +++ b/setup.py @@ -4,21 +4,20 @@ from subprocess import check_output from wheel.bdist_wheel import bdist_wheel import os -VERSION = "0.7a0" +VERSION = '0.1' ROOT = os.path.dirname(os.path.abspath(__file__)) def get_long_description(): - with open( - os.path.join(os.path.dirname(os.path.abspath(__file__)), "README.md"), - encoding="utf8", - ) as fp: + with open(os.path.join( + os.path.dirname(os.path.abspath(__file__)), 'README.md' + ), encoding='utf8') as fp: return fp.read() class BdistWheelWithBuildStatic(bdist_wheel): def run(self): - self.run_command("build_static") + self.run_command('build_static') return bdist_wheel.run(self) @@ -32,41 +31,36 @@ class BuildStatic(Command): pass def run(self): - check_output(["npm", "install"], cwd=ROOT) - check_output(["npm", "run", "build"], cwd=ROOT) - check_output(["mkdir", "-p", "datasette_vega/static"], cwd=ROOT) - check_output( - "mv build/static/js/* datasette_vega/static/", shell=True, cwd=ROOT - ) - check_output( - "mv build/static/css/* datasette_vega/static/", shell=True, cwd=ROOT - ) + check_output(['npm', 'run', 'build'], cwd=ROOT) + check_output(['mkdir', '-p', 'datasette_vega/static'], cwd=ROOT) + check_output("mv build/static/js/*.js datasette_vega/static/datasette-vega.js", shell=True, cwd=ROOT) + check_output("mv build/static/css/*.css datasette_vega/static/datasette-vega.css", shell=True, cwd=ROOT) setup( - name="datasette-vega", - description="A Datasette plugin that provides tools for generating charts using Vega", + name='datasette-vega', + description='A Datasette plugin that provides tools for generating charts using Vega', long_description=get_long_description(), - long_description_content_type="text/markdown", - author="Simon Willison", - url="https://github.com/simonw/datasette-vega", - license="Apache License, Version 2.0", + long_description_content_type='text/markdown', + author='Simon Willison', + url='https://github.com/simonw/datasette-vega', + license='Apache License, Version 2.0', version=VERSION, - packages=["datasette_vega"], + packages=['datasette_vega'], entry_points={ - "datasette": ["vega = datasette_vega"], + 'datasette': [ + 'cluster_map = datasette_vega' + ], }, package_data={ - "datasette_vega": [ - "static/*.js", - "static/*.css", - "static/*.map", + 'datasette_vega': [ + 'static/datasette-vega.js', + 'static/datasette-vega.css', ], }, cmdclass={ - "bdist_wheel": BdistWheelWithBuildStatic, - "build_static": BuildStatic, + 'bdist_wheel': BdistWheelWithBuildStatic, + 'build_static': BuildStatic, }, - install_requires=["datasette"], - extras_require={"test": ["pytest", "pytest-asyncio", "httpx"]}, + install_requires=['datasette'] ) diff --git a/src/DatasetteVega.css b/src/DatasetteVega.css index efbcbeb..199ea14 100644 --- a/src/DatasetteVega.css +++ b/src/DatasetteVega.css @@ -66,56 +66,3 @@ background-color: #f7f7f9; color: #1b1e23; } - -.datasette-vega { - margin: 1em 0; - padding: 1em; - width: auto; - display: inline-block; - font-size: 0.8em; - box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08); -} -.datasette-vega h3 { - margin-top: 0; -} -.datasette-vega .swap-x-y { - text-align: center; - margin-bottom: 0.6em; -} -.datasette-vega button, -.datasette-vega-inactive button { - background-color: #fafafa; - border: 1px solid #ccc; - font-weight: 400; - cursor: pointer; - text-align: center; - vertical-align: middle; - padding: .5em 0.8em; - line-height: 1; - border-radius: .25rem; - -webkit-appearance: button; - font-size: 0.7em; -} -.datasette-vega-inactive { - margin-bottom: 1em; -} - -form.datasette-vega label { - font-weight: bold; - display: inline; - width: auto; - padding-right: 0.3em; -} - -form.datasette-vega div { - margin-bottom: 0.3em; -} - -.datasette-vega .radio-buttons label { - margin-right: 2em; - display: inline-block; -} - -.datasette-vega .radio-buttons { - margin-bottom: 1em; -} diff --git a/src/DatasetteVega.js b/src/DatasetteVega.js index b617a01..7501d33 100644 --- a/src/DatasetteVega.js +++ b/src/DatasetteVega.js @@ -21,13 +21,10 @@ const unserialize = (s, prefix) => { return obj; }; -const escapeString = s => (s || '').replace(/"/g, '\\x22').replace(/'/g, '\\x27'); - class DatasetteVega extends Component { state = { - show: false, - columns: [], - mark: null, + columns: this.props.columns || [], + mark: "bar", x_column: null, x_type: "ordinal", y_column: null, @@ -35,22 +32,20 @@ class DatasetteVega extends Component { color_column: "", size_column: "" } - constructor(props) { - super(props); - this.chartRef = React.createRef(); - } markOptions = [ - {"value": "bar", "name": "Bar"}, - {"value": "line", "name": "Line"}, - {"value": "circle", "name": "Scatter"}, + {"value": "bar", "name": "bar"}, + {"value": "line", "name": "line"}, + {"value": "circle", "name": "circle"}, + {"value": "square", "name": "square"}, + {"value": "point", "name": "point"}, ] typeOptions = [ - {"value": "quantitative", "name": "Numeric"}, - {"value": "quantitative-bin", "name": "Numeric, binned"}, - {"value": "temporal", "name": "Date/time"}, - {"value": "temporal-bin", "name": "Date/time, binned"}, - {"value": "ordinal", "name": "Label"}, - {"value": "nominal", "name": "Category"}, + {"value": "quantitative", "name": "Numbers (quantitative)"}, + {"value": "quantitative-bin", "name": "Numbers (quantitative), binned"}, + {"value": "temporal", "name": "Dates and times (temporal)"}, + {"value": "temporal-bin", "name": "Dates and times (temporal), binned"}, + {"value": "ordinal", "name": "Labels (ordinal)"}, + {"value": "nominal", "name": "Categories (nominal)"}, ] onChangeSelect(name, ev) { ev.persist(); @@ -73,33 +68,20 @@ class DatasetteVega extends Component { window.onpopstate = this.onPopStateChange.bind(this); // Load the columns let url = this.jsonUrl(); + if (this.props.columns) { + return; + } fetch(url).then(r => r.json()).then(data => { if (data.length > 1) { // Set columns to first item's keys - const columns = Object.keys(data[0]).map(key => { - // Do ANY of these rows have a .label property? - if (data.filter(d => (d[key] || '').label !== undefined).length) { - return `${key}.label`; - } else { - return key; - } - }); - let initialState = { + const columns = Object.keys(data[0]).map( + key => (data[0][key] && data[0][key].label) ? `${key}.label` : key + ); + this.setState({ columns: columns, x_column: columns[0], y_column: columns[1], - }; - // Is there state in the URL? If so use that too - let urlState = unserialize(document.location.hash, 'g'); - if (Object.keys(urlState).length) { - initialState = Object.assign(initialState, urlState); - // And show the widget - initialState.show = true; - } - this.setState(initialState, () => { - this.onPopStateChange(); - this.renderGraph(); - }); + }, this.renderGraph); } }); } @@ -125,7 +107,7 @@ class DatasetteVega extends Component { onPopStateChange(ev) { window.lastPopEv = ev; const expected = '#' + this.serializeState(); - if (expected !== document.location.hash && this.state.mark) { + if (expected !== document.location.hash) { this.setState( unserialize(document.location.hash, 'g'), this.renderGraph.bind(this) ); @@ -138,8 +120,7 @@ class DatasetteVega extends Component { const y_bin = !!/-bin$/.exec(this.state.y_type); let encoding = { x: {field: this.state.x_column, type: x_type, bin: x_bin}, - y: {field: this.state.y_column, type: y_type, bin: y_bin}, - tooltip: {field: "_tooltip_summary", type: "ordinal"}, + y: {field: this.state.y_column, type: y_type, bin: y_bin} } if (this.state.color_column) { encoding.color = {field: this.state.color_column, type: "nominal"}; @@ -151,24 +132,14 @@ class DatasetteVega extends Component { data: { url: this.jsonUrl() }, - transform: [{ - calculate: ` - '${escapeString(this.state.x_column)}: ' + datum['${escapeString(this.state.x_column)}'] + - ', ${escapeString(this.state.y_column)}: ' + datum['${escapeString(this.state.y_column)}'] + - (${!!this.state.color_column} ? ', ${escapeString(this.state.color_column)}: ' + datum['${escapeString(this.state.color_column)}'] : '') + - (${!!this.state.size_column} ? ', ${escapeString(this.state.size_column)}: ' + datum['${escapeString(this.state.size_column)}'] : '') - `, - as: "_tooltip_summary" - }], mark: this.state.mark, encoding: encoding } if (spec.mark && spec.encoding.x.field && spec.encoding.y.field) { - vegaEmbed(this.chartRef.current, spec, {theme: 'quartz', tooltip: true}); + vegaEmbed("#vis", spec, {theme: 'quartz', tooltip: true}); document.location.hash = '#' + this.serializeState(); - this.props.onFragmentChange && this.props.onFragmentChange(); // Add to state so react debug tools can see it (for debugging): - this.setState({spec: spec, show: true}); + this.setState({spec: spec}); } } toggleAxis(ev) { @@ -180,65 +151,44 @@ class DatasetteVega extends Component { y_type: prevState.x_type, }), this.renderGraph); } - showChart() { - this.setState({ - show: true - }, this.renderGraph.bind(this)); - } render() { const onChangeSelect = this.onChangeSelect.bind(this); const columns = this.state.columns; - if (!this.state.show) { - return
; - } return ( - (columns.length > 1) ?
-

Charting options

-
- {this.markOptions.map(option => ( - - ))} + (columns.length > 1) ? +
+
-
- - +
-
- - +
-
- -
-
- - +
- -
-
-
-
: null +
+ : null ); } } diff --git a/src/index.css b/src/index.css index 983aee4..cbabe2a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,14 @@ -body.datasette-vega-demo { +body { margin: 0; padding: 1em; font-family: sans-serif; } -body.datasette-vega-demo form div { +form div { margin-bottom: 0.5em } -body.datasette-vega-demo label { +label { padding-right: 0.5em; } diff --git a/src/index.js b/src/index.js index 98adc8f..a24b420 100644 --- a/src/index.js +++ b/src/index.js @@ -3,42 +3,16 @@ import ReactDOM from 'react-dom'; import './index.css'; import DatasetteVega from './DatasetteVega'; -const matchesCurrentHostAndPath = (url) => { - // Given a url, is it the same host and path as current page? - // (ignores querystring and fragment hash) - url = url.split('#')[0]; - // Only activate if link is to current page (presumably with different querystring) - var currentHostAndPath = window.location.hostname; - if (window.location.port !== '') { - currentHostAndPath += ':' + window.location.port; - } - currentHostAndPath += window.location.pathname; - // Ignore http/s due to https://github.com/simonw/datasette/issues/333 - var linkedHostAndPath = url.split('://')[1].split('?')[0]; - return currentHostAndPath === linkedHostAndPath; -}; - -// Update any forms with current page as action when fragment changes -const onFragmentChange = () => { - if (window.location.hash.length === 0) { - return; - } - Array.from(document.getElementsByTagName('form')).forEach(form => { - var action = form.action.split('#')[0]; - if (matchesCurrentHostAndPath(action)) { - form.action = action + window.location.hash; - } - }); -}; - document.addEventListener('DOMContentLoaded', () => { - let visTool, jsonUrl; + let visWrapper, vis, visTool, jsonUrl; if (process.env.REACT_APP_STAGE === 'dev') { // Dev mode - use graph elements already on the index.html page let m = /\?url=(.*)/.exec(window.location.search) if (m) { jsonUrl = decodeURIComponent(m[1]); document.getElementById('jsonUrl').value = jsonUrl; + visWrapper = document.getElementById('vis-wrapper'); + vis = document.getElementById('vis'); visTool = document.getElementById('vis-tool'); } } else { @@ -46,9 +20,15 @@ document.addEventListener('DOMContentLoaded', () => { if (jsonEl) { jsonUrl = jsonEl.getAttribute('href'); // Create elements for adding graph tool to page + visWrapper = document.createElement('div'); + visWrapper.style.overflow = 'hidden'; + vis = document.createElement('div'); visTool = document.createElement('div'); + vis.setAttribute('id', 'vis'); + visWrapper.appendChild(vis); let table = document.querySelector('table.rows-and-columns'); - table.parentNode.insertBefore(visTool, table); + table.parentNode.insertBefore(visWrapper, table); + table.parentNode.insertBefore(visTool, visWrapper); } } if (jsonUrl) { @@ -56,43 +36,7 @@ document.addEventListener('DOMContentLoaded', () => { jsonUrl += (jsonUrl.indexOf('?') > -1) ? '&' : '?'; jsonUrl += '_shape=array' ReactDOM.render( - , visTool + , visTool ); } }); - -// Persist #settings across links to same page -window.addEventListener('click', function (ev) { - if (window.location.hash.length === 0) { - return true; - } - if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.defaultPrevented) { - return true; - } - var a = null; - for (var n = ev.target; n.parentNode; n = n.parentNode) { - if (n.nodeName === 'A') { - a = n; - break; - } - } - if (!a || !a.href) { - return true; - } - // This expands the full URL even if the link is /relative: - var href = a.href; - // Split off any existing #fragment - href = href.split('#')[0]; - var linkedHostQuery = href.split('?')[1]; - if (matchesCurrentHostAndPath(href)) { - // Cancel click, navigate to this + fragment instead - var linkedHostAndPath = href.split('://')[1].split('?')[0]; - if (linkedHostQuery) { - linkedHostAndPath += '?' + linkedHostQuery; - } - ev.preventDefault(); - window.location = window.location.protocol + '//' + linkedHostAndPath + window.location.hash; - return false; - } - return true; -}); diff --git a/tests/test_vega.py b/tests/test_vega.py deleted file mode 100644 index a77cd7f..0000000 --- a/tests/test_vega.py +++ /dev/null @@ -1,11 +0,0 @@ -import pytest -from datasette.app import Datasette - - -@pytest.mark.asyncio -async def test_plugin_is_installed(): - ds = Datasette([], memory=True) - response = await ds.client.get("/-/plugins.json") - assert response.status_code == 200 - installed_plugins = {p["name"] for p in response.json()} - assert "datasette-vega" in installed_plugins