Git Product home page Git Product logo

chartwerk-editor's Introduction

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.

chartwerk-editor's People

Contributors

achavez avatar allanjamesvestal avatar hobbes7878 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

chartwerk-editor's Issues

Datamap selections and aliasing

In three parts:

Part 1

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.

Part 2

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.

Part 3

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:

  1. The data classification dropdowns
  2. The classification helper modal
  3. Axis tab section labels

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.

Date parsing

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 work
  • Aug 04, 2006 does

SVG text duplication in screenshots

html2canvas 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.

Date parsing issues since last update

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.):

screen shot 2018-01-12 at 12 25 24 pm

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)

Font fall-through on screenshot

Macs users working with templates using custom web fonts reported mangled fonts on html2canvas screenshot. Using the same font on Ubuntu, I get consistent font rendering.

chartwerk 3

Date parsing

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

Sort options for categorical base axis

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.

404 after using "Clone to new chart"

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.

ACE search doesn't work

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

Table template column ordering

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.

Color scales don't display when set by template

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:

screen shot 2016-09-29 at 5 28 49 pm

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/

Legend keys placeholder text

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.

Prompt user before page reload

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.

Allow charts to surface messages in the UI

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:

  • A map is parsing counties, and can't reconcile one of the rows. That could raise a warning-type message if the parse fails.
  • A map has parsed all the counties in Texas, but its 2 short of having all 254 counties. It could raise a message verifying to the user that there are two missing counties.

date parsing problem

Doesn't recognize month/day/year format with same day number.
Example:
1/1/16
2/1/16
3/1/16
4/1/16

Free symbols for annotations

It's helpful to have callouts paired with annotations to indicate specific data points.

image

Right now, we can hack them in by creating annotations with single symbols.

image

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?

Redirect to chart's page after initial save?

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.

Spaces in headers

... can cause parsing problems. Investigate when it happens and why.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.