mirror of
https://github.com/simonw/datasette-vega.git
synced 2026-07-20 16:04:34 +02:00
Compare commits
4 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
113f05de87 | ||
|
|
64be9a6f0d | ||
|
|
7280e8500c | ||
|
|
094c7fba3d |
13 changed files with 104 additions and 544 deletions
15
.travis.yml
15
.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
|
||||
|
|
|
|||
201
LICENSE
201
LICENSE
|
|
@ -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.
|
||||
21
README.md
21
README.md
|
|
@ -1,22 +1,3 @@
|
|||
# datasette-vega
|
||||
|
||||
[](https://pypi.org/project/datasette-vega/)
|
||||
[](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/).
|
||||
|
||||
|
||||
|
||||
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/).
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
|
|
@ -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"]
|
||||
|
|
|
|||
23
package.json
23
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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,15 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<link rel="stylesheet" href="https://latest.datasette.io/-/static/app.css">
|
||||
<title>Datasette Vega</title>
|
||||
</head>
|
||||
<body class="datasette-vega-demo">
|
||||
<h1>Datasette Vega</h1>
|
||||
<p>Enter the URL of the JSON version of any Datasette table:</p>
|
||||
<form action="." method="GET" style="margin-bottom: 2em">
|
||||
<input id="jsonUrl" type="text" name="url" value="https://fivethirtyeight.datasettes.com/fivethirtyeight-45d758d/nba-elo%2Fnbaallelo.json" style="width: 80%; font-size: 1.2em;">
|
||||
<input type="submit" value="Load" style="font-size: 1.2em; border: 1px solid #ccc">
|
||||
<p>Examples: <a href="/?url=https%3A%2F%2Ffivethirtyeight.datasettes.com%2Ffivethirtyeight-45d758d%2Fnba-elo%252Fnbaallelo.json#g.mark=bar&g.x_column=game_id&g.x_type=ordinal&g.y_column=pts&g.y_type=quantitative&g.color_column=team_id">game_id/pts/team_id</a></p>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<form action="." method="GET">
|
||||
<input id="jsonUrl" type="text" name="url" value="">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<div id="vis-tool"></div>
|
||||
<div id="vis-wrapper" style="overflow: auto">
|
||||
|
|
|
|||
56
setup.py
56
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']
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <div className="datasette-vega-inactive"><button onClick={this.showChart.bind(this)}>Show charting options</button></div>;
|
||||
}
|
||||
return (
|
||||
(columns.length > 1) ? <div><form action="" method="GET" id="graphForm" className="datasette-vega">
|
||||
<h3>Charting options</h3>
|
||||
<div className="filter-row radio-buttons">
|
||||
{this.markOptions.map(option => (
|
||||
<label key={option.value} value={option.value}><input
|
||||
type="radio"
|
||||
name="mark"
|
||||
value={option.value}
|
||||
checked={option.value === this.state.mark}
|
||||
onChange={ev => onChangeSelect("mark", ev)}
|
||||
/> {option.name}</label>
|
||||
))}
|
||||
(columns.length > 1) ? <form action="" method="GET" id="graphForm">
|
||||
<div>
|
||||
<label>Type of chart: <select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
|
||||
{this.markOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
|
||||
</select></label>
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
<label>X column <div className="select-wrapper"><select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
|
||||
<div>
|
||||
<label>X <select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
|
||||
{columns.map(column => <option key={column} value={column}>{column}</option>)}
|
||||
</select></div></label>
|
||||
<label>Type <div className="select-wrapper"><select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
|
||||
</select></label>
|
||||
<label>X type: <select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
|
||||
{this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
|
||||
</select></div></label>
|
||||
</select></label>
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
<label>Y column <div className="select-wrapper"><select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
|
||||
<div>
|
||||
<label>Y <select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
|
||||
{columns.map(column => <option key={column} value={column}>{column}</option>)}
|
||||
</select></div></label>
|
||||
<label>Type <div className="select-wrapper"><select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
|
||||
</select></label>
|
||||
Y type: <select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
|
||||
{this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
|
||||
</select></div></label>
|
||||
</select>
|
||||
</div>
|
||||
<div className="swap-x-y">
|
||||
<button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button>
|
||||
</div>
|
||||
<div className="filter-row">
|
||||
<label>Color <div className="select-wrapper"><select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
|
||||
<div>
|
||||
<label>Color <select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
|
||||
<option value="">-- none --</option>
|
||||
{columns.map(column => <option key={column} value={column}>{column}</option>)}
|
||||
</select></div></label>
|
||||
<label>Size <div className="select-wrapper"><select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
|
||||
</select></label>
|
||||
<label>Size <select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
|
||||
<option value="">-- none --</option>
|
||||
{columns.map(column => <option key={column} value={column}>{column}</option>)}
|
||||
</select></div></label>
|
||||
</select></label>
|
||||
</div>
|
||||
</form>
|
||||
<div style={{overflow:'auto'}}>
|
||||
<div ref={this.chartRef}></div>
|
||||
</div>
|
||||
</div> : null
|
||||
<div><button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
|
||||
</form> : null
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
78
src/index.js
78
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(
|
||||
<DatasetteVega base_url={jsonUrl} onFragmentChange={onFragmentChange} />, visTool
|
||||
<DatasetteVega base_url={jsonUrl} />, 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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Add table
Add a link
Reference in a new issue