A React/Redux-based live editor for Chartwerk charts.
This repository contains the chart editor. For the deployable Chartwerk app, see django-chartwerk.
See a demo of the editor here.
Documentation hosted on gitbook.
React/Redux Chartwerk editor.
License: GNU Affero General Public License v3.0
A React/Redux-based live editor for Chartwerk charts.
This repository contains the chart editor. For the deployable Chartwerk app, see django-chartwerk.
See a demo of the editor here.
Documentation hosted on gitbook.
Currently, all characters, including HTML or markdown links count against the limit. This requires using link shorteners, particularly in the data source field.
Opening here from DallasMorningNews/django-chartwerk#23.
Need to add exception for base.html
for django projects.
Also see #25 .
For a number of elements that are specific to one size of the chart, it would be nice if the preview automatically switched so you could see what you're changing. Sometimes it's confusing to make changes that you don't see reflected in the preview, only because you forgot to switch the size in both the interface and the preview.
In three parts:
I need to add two new data classification options for network charts like sankey diagrams. Considering calling them network source
and network target
.
Both options are simply markers and don't need any additional UI in the editor.
With two new options, I think it makes sense to add options on the template to trim the number of data classifications surfaced to the user. So if your template doesn't have handling for an annotation column
, you should be able to hide that option in the data classification pull downs. The UI for the template developer could be a simple set of checkboxes in the template save modal.
I want to consider creating an aliasing system for data classifications. The universal classification terms are important for the system to have, but that doesn't mean we couldn't surface more natural terms to users in the editor.
This labelling would need to carry in three places:
The UI for aliasing could happen in the same spot as selecting which classifications to surface in the template save modal. We would keep the current classification terms as defaults.
Still having issues automatically parsing date formats.
With the default line chart template the following date types aren't correctly parsing:
24-Aug-2015
8/24/2015
These formats do parse:
08/24/15
2015-08-24
Generally have problems with non-zero padded dates:
Aug 4, 2006
does not workAug 04, 2006
doeshtml2canvas duplicating svg text during rendering. Pull requests are in on the main repo purporting a fix, but library has no updates in 8 months.
Only thing for it is probably to fork the library and implement fix.
I'm still trying to trace through the cause of this (may very well be on our end), but we have several charts that aren't rendering properly in the editor since the last update. Example (this chart has data, chatter, etc.):
There is an error in the console that I'm almost certain is the cause, but I haven't fully traced this back through React-land to figure out exactly why/how:
API ERROR TypeError: n.data[i][r].trim is not a function
at e (BaseTypePicker.jsx:83)
at Object.dateSniffer (BaseTypePicker.jsx:92)
at Object.render (BaseTypePicker.jsx:130)
at u._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:799)
at u._renderValidatedComponent (ReactCompositeComponent.js:822)
at u.performInitialMount (ReactCompositeComponent.js:362)
at u.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at f.mountChildren (ReactMultiChild.js:238)
at f._createInitialChildren (ReactDOMComponent.js:697)
Give prefix and suffix props for scale axes. These will be used on tooltips.
Don't seem to be wired into the API.
Still getting odd parse errors for basic formats.
This data didn't parse:
Month | Coal | Natural gas | Wind and solar |
---|---|---|---|
1/1/2007 | 51.26 | 15.83 | 0.73 |
2/1/2007 | 52.02 | 16.56 | 0.81 |
3/1/2007 | 51.33 | 16.22 | 1 |
4/1/2007 | 49.72 | 18.58 | 1.11 |
It's not clear that there's one right way to sort categorical axis values. The default vertical bar chart templates sort the categories alphabetically, but there may be cases where you want to order by the values themselves (ascending or descending), as well as other cases where you just want to respect the order of the raw data (which is what the default horizontal bar chart does).
Maintaining separate templates for each case seems inefficient. It seems like something that could be exposed in the UI, but I'm also aware of the unwanted complexity that might add.
I'm getting a "Page not found" page on the cloned chart page when using the cloning tool. It does show up correctly on the home page and I can access the chart from there, it's just the redirect that is broken.
I'll try to reproduce later and provide better info.
Read through gitbook and update any new changes.
It looks like it's missing a JS module that handles the search because a Ctrl + F throws a network error in the console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://django-chartwerk.herokuapp.com/template/texas-county-choropleth-map/ext-searchbox.js
Should update the original template.
Because data objects don't retain their order, table templates, which right now don't use the datamap classification scheme, are inconsistently ordered.
May need to create a new key on redux state tree that contains an array of headers so we can recompose the order of the original data.
When creating a template that uses a color scale and saving that template, the color scales are set in the Chartwerk API but don't show in the editor.
For example, here's the UI right after loading the template:
And here's chartwerk.axes.color
:
{
"domain": ["A", "J", "Other"],
"range": ["#E34E36", "#329CEB", "#C9C9C9"],
"scheme": "categorical.default",
"byFacet":true,
"ignoreScale":false,
"quantize":false,
"quantizeProps": {
"column": null,
"groups": 0,
"reverseColors": false
}
}
This is pulled from the unit chart, FWIW: http://django-chartwerk.herokuapp.com/template/unit-chart/
would be significantly faster than the current browserify setup
This is backwerds. Whoops.
Simple frustration: Changing the color of a column on the Data tab wipes out the text in the legend key on the Annotations tab.
In lieu of a larger change that will mess with the inheritable data structure to fix that, we can at least spare people needing to flick between the two tabs to remember which color represents which data column by simply using the name of the column as placeholder text for the legend key.
Need to remove this condition due to data table templates that skip datamap classification step.
Which?
... by about 20px.
I've been spending more time building and editing templates lately, but today I fat-fingered F5
in the middle of an editing session and had to start over. Without any sort of auto-save, a user should probably get a warning prompt before an editor page reloads.
Idea:
A method that a chart could call that would raise messaging to the user in the UI about issues encountered in the chart code. These could be errors or they could be what'd normally be warning-level stuff. In production, this could be a no-op or could just be piped to the console.
Some use cases:
Doesn't recognize month/day/year format with same day number.
Example:
1/1/16
2/1/16
3/1/16
4/1/16
Hide shaded region when base axis is categorical.
Looks like yarn hangs on the input that is part of the package's postinstall script here.
Yarn did not always support postinstall scripts to begin with, but this may cause me to rethink keeping that script.
Still works great using npm, fwiw.
It's helpful to have callouts paired with annotations to indicate specific data points.
Right now, we can hack them in by creating annotations with single symbols.
Like to make this a more explicit feature.
One idea, we're toying with is to create a font that has a number of callout symbols in it -- swoopy arrows and straight lines at different angles, triangles, etc. Users select a symbol that they can then freely position like an annotation.
Other ideas?
Need new legend rendering script.
Right now when you create a new chart from a template the editor URL stays the same after you click Save. Should be redirecting to the chart's permalink URL?
No strong feelings on that, just making sure that's intended behavior.
With new tags for adding styles and scripts to the editor
... can cause parsing problems. Investigate when it happens and why.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.