2 |
3 |
4 | A [React](https://facebook.github.io/react/)/[Redux](http://redux.js.org/)-based live editor for Chartwerk charts.
5 |
6 | This repository contains the chart editor. For the deployable Chartwerk app, see [django-chartwerk](https://github.com/DallasMorningNews/django-chartwerk/).
7 |
8 | See a demo of the editor [here](http://dallasmorningnews.github.io/chartwerk-editor/).
9 |
10 | Documentation hosted [on gitbook](https://the-dallas-morning-news.gitbooks.io/chartwerk-editor/content/docs/introduction.html).
11 |
--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
1 | # Summary
2 |
3 | * [README](README.md)
4 | * [Introduction](docs/introduction.md)
5 | * [How Chartwerk makes charts](docs/how-chartwerk-makes-charts.md)
6 | * [Chart template basics](docs/template-basics.md)
7 | * [Chartwerk's API](docs/chartwerk-api.md)
8 | * [Data](docs/api/data.md)
9 | * [Datamap](docs/api/datamap.md)
10 | * [Axes](docs/api/axes.md)
11 | * [Margins](docs/api/margins.md)
12 | * [Text](docs/api/text.md)
13 | * [Scripts](docs/api/scripts.md)
14 | * [Template](docs/api/template.md)
15 | * [UI](docs/api/ui.md)
16 | * [Embed](docs/api/embed.md)
17 | * [Integrating with a backend](docs/chartwerk-backend.md)
18 | * [Embedding Chartwerk charts](docs/embedding.md)
19 | * [Developing](docs/developing.md)
20 |
21 |
--------------------------------------------------------------------------------
/bin/unbundle_dist.js:
--------------------------------------------------------------------------------
1 | const vfs = require('vinyl-fs');
2 | const path = require('path');
3 |
4 | // Change working directory to lib
5 | process.chdir(path.join(__dirname, '/../'));
6 |
7 | vfs.src('./dist/**/*').pipe(vfs.dest('./../../dist/'));
8 |
--------------------------------------------------------------------------------
/bin/unbundle_django.js:
--------------------------------------------------------------------------------
1 | const vfs = require('vinyl-fs');
2 | const path = require('path');
3 |
4 | // Change working directory to lib
5 | process.chdir(path.join(__dirname, '/../'));
6 |
7 | vfs.src('./dist/js/**/*').pipe(vfs.dest('./../../../static/chartwerk/js'));
8 | vfs.src('./dist/css/**/*').pipe(vfs.dest('./../../../static/chartwerk/css'));
9 | vfs.src('./dist/img/**/*').pipe(vfs.dest('./../../../static/chartwerk/img'));
10 | vfs.src('./dist/fonts/**/*').pipe(vfs.dest('./../../../static/chartwerk/fonts'));
11 | vfs.src(['./src/templates/**/*.html', '!./**/index.html', '!./**/base.html'])
12 | .pipe(vfs.dest('./../../../templates/chartwerk'));
13 |
--------------------------------------------------------------------------------
/book.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "github"
4 | ],
5 | "pluginsConfig": {
6 | "github": {
7 | "url": "https://github.com/DallasMorningNews/chartwerk-editor"
8 | }
9 | }
10 | }
--------------------------------------------------------------------------------
/demo/api/README.md:
--------------------------------------------------------------------------------
1 | The API data for this demo is hosted on Amazon Web Services S3 and rendered RESTfully through AWS Lambda and API Gateway.
2 |
--------------------------------------------------------------------------------
/demo/fonts/bootstrap/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/bootstrap/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/demo/fonts/bootstrap/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/bootstrap/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/demo/fonts/bootstrap/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/bootstrap/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/demo/fonts/bootstrap/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/bootstrap/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/demo/fonts/kraftwerk.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/kraftwerk.ttf
--------------------------------------------------------------------------------
/demo/fonts/kraftwerk2.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/fonts/kraftwerk2.ttf
--------------------------------------------------------------------------------
/demo/img/eq-red.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/eq-red.gif
--------------------------------------------------------------------------------
/demo/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/favicon.ico
--------------------------------------------------------------------------------
/demo/img/icons/danger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/danger.png
--------------------------------------------------------------------------------
/demo/img/icons/disallowed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/disallowed.png
--------------------------------------------------------------------------------
/demo/img/icons/doubleColumn-disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/doubleColumn-disabled.png
--------------------------------------------------------------------------------
/demo/img/icons/doubleColumn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/doubleColumn.png
--------------------------------------------------------------------------------
/demo/img/icons/singleColumn-disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/singleColumn-disabled.png
--------------------------------------------------------------------------------
/demo/img/icons/singleColumn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/icons/singleColumn.png
--------------------------------------------------------------------------------
/demo/img/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/loader.gif
--------------------------------------------------------------------------------
/demo/img/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/spinner.gif
--------------------------------------------------------------------------------
/demo/img/tdmn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/demo/img/tdmn.png
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
6 |
7 | For example, the stock data in the above image would be converted to an array that looks like this:
8 |
9 | ```javascript
10 | [
11 | {
12 | Date: '2015-08-24',
13 | CBM: 45.47,
14 | GQS: 32.84
15 | }
16 | ]
17 | ```
--------------------------------------------------------------------------------
/docs/api/embed.md:
--------------------------------------------------------------------------------
1 | # chartwerk.embed
2 |
3 | Properties used to specify an embed code for a chart.
4 |
5 | - [embed.dimensions](#embed)
6 |
7 | #### embed.dimensions {#embed}
8 |
9 | The dimensions in pixels of the chart at both the single and double-wide size.
10 |
11 | These are queried in the DOM while saving a chart in the editor. They are used in a child embed script to set the dimensions of the iframe and are passed to the client when using the oEmbed endpoint for chart embeds.
12 |
13 | ```JSON
14 | {
15 | single: {
16 | width: 270,
17 | height: 527
18 | },
19 | double: {
20 | width: 560,
21 | height: 436
22 | }
23 | }
24 | ```
--------------------------------------------------------------------------------
/docs/api/margins.md:
--------------------------------------------------------------------------------
1 | # chartwerk.margins
2 |
3 | The margins around a chart.
4 |
5 | - [margins.{single|double}](#margins)
6 |
7 | 
8 |
9 | #### margins.{single|double} {#margins}
10 |
11 | Margin dimensions expressed as a percentage of the chart container width.
12 |
13 | ```JSON
14 | {
15 | top: 0.05,
16 | right: 0.1,
17 | bottom: 0.05,
18 | left: 0.1
19 | }
20 | ```
--------------------------------------------------------------------------------
/docs/api/scripts.md:
--------------------------------------------------------------------------------
1 | # chartwerk.scripts
2 |
3 | Chartwerk scripts are the custom code that underlies every template in Chartwerk. They are completely customizable JS/CSS/HTML scripts and dependency files.
4 |
5 | - [scripts.draw](#scripts-draw)
6 | - [scripts.helper](#scripts-helper)
7 | - [scripts.styles](#scripts-styles)
8 | - [scripts.html](#scripts-html)
9 | - [scripts.dependencies](#scripts-dependencies)
10 |
11 | 
12 |
13 | #### scripts.draw {#scripts-draw}
14 |
15 | Contains a single javascript function which **must** be named `draw`. This function is called by Chartwerk to render your chart whenever a user chooses or changes an option in the editor.
16 |
17 | ```javascript
18 | draw(){
19 | var werk = window.chartwerk;
20 |
21 | var svg = d3.select("#chart")
22 | .append("svg");
23 |
24 | // etc.
25 | }
26 | ```
27 |
28 | #### scripts.helper {#scripts-helper}
29 |
30 | You may create an object with methods to help draw your chart. This object can be useful for removing boilerplate code used to parse UI options, keeping your draw function cleaner and easier to work with.
31 |
32 | The object will be accessible in the global scope.
33 |
34 | ```javascript
35 | var werkHelper = {
36 |
37 | parseAxes: function(werk){
38 | // Do a thing...
39 | },
40 |
41 | parseScales: function(werk){
42 | // Do another...
43 | },
44 |
45 | build: function(werk){
46 | parseAxes(werk);
47 | parseScales(werk);
48 | // ...
49 | return werk;
50 | }
51 |
52 | }
53 | ```
54 |
55 | #### scripts.style {#scripts-style}
56 |
57 | CSS style rules. These are injected **below** any dependency stylesheets.
58 |
59 | #### scripts.html {#scripts-html}
60 |
61 | Any HTML elements specified here are appended to the element, `div#chartwerk`.
62 |
63 | **Important:** Chartwerk expects certain elements will be present to inject data from the editor into, specifically text elements. These elements are selected by their `id` property. At minimum the following elements should be present, though they need not _necessarily_ be structured this way:
64 |
65 | ```html
66 | 
15 |
16 |
17 | #### template.description {#description}
18 |
19 | A description of the template.
20 |
21 | #### template.icon {#icon}
22 |
23 | The URL path to an icon image for the template. There is currently no input for this field in the editor. We expect the backend to supply this data.
24 |
25 | #### template.tags {#tags}
26 |
27 | An array of tags that describe the template. These can be used to create a chart type finder in the backend application. Chartwerk queries a separate API endpoint for available tags.
28 |
29 | 
30 |
--------------------------------------------------------------------------------
/docs/api/ui.md:
--------------------------------------------------------------------------------
1 | # chartwerk.ui
2 |
3 | UI properties represent state in the editor. Generally, they are not used to draw the chart.
4 |
5 | - [ui.rawData](#raw)
6 | - [ui.size](#size)
7 | - [ui.datamap](#datamap)
8 |
9 | #### ui.rawData {#raw}
10 |
11 | A string of the raw data pasted into the editor by a chart creator.
12 |
13 | #### ui.size {#size}
14 |
15 | The size of chart to render in the preview window. Either `single` or `double`.
16 |
17 | #### ui.datamap {#datamap}
18 |
19 | The datamap classification options with their aliases and availability (i.e., whether they are visible in the dropdown).
20 |
21 | ```javascript
22 | [
23 | {
24 | class: "base",
25 | alias: "X axis",
26 | available: true
27 | }
28 | ]
29 | ```
--------------------------------------------------------------------------------
/docs/chartwerk-api.md:
--------------------------------------------------------------------------------
1 | # Chartwerk's API
2 |
3 | The Chartwerk API is a complete JSON representation of every chart Chartwerk makes, from the raw data a user pastes into the Editor to the individual options she chooses for things like colors and text labels to the template code that parses those options to create the chart.
4 |
5 | The entire UI state in the Editor is also represented in the API's JSON, making charts extremely portable.
6 |
7 | In the Editor, the API is accessed via the `chartwerk` global object. When you write template code, you'll get chart data and options through that object. For example:
8 |
9 | ```javascript
10 | var myChartData = chartwerk.data;
11 | ```
12 |
13 | Chart creators will likely never see the API, but template developers will interact with it directly, as it contains all the key information necessary to build a chart.
14 |
15 | Most chart templates will only use a portion of the data and options specified in the API, but in its entirety, the spec is robust enough to build dozens of chart types.
16 |
17 | #### Learning the API
18 |
19 | Complete documentation for the API is included here, but **the best way to understand how the API works is to observe it in the Editor.**
20 |
21 | Open the full screen JavaScript editor on the Code tab and check out the API tree chart. There you can see the API populated with real data parsed by the template and how those properties change with user input in the Editor.
22 |
23 | 
--------------------------------------------------------------------------------
/docs/chartwerk-backend.md:
--------------------------------------------------------------------------------
1 | # Integrating chartwerk-editor with a backend
2 |
3 | Chartwerk-editor is simply an interface for creating and editing charts and templates. It needs a backend, which manages the logic of saving and storing charts and templates, managing user charts and baking charts as flat files to AWS or another hosting service, among other important functions.
4 |
5 | These docs are not meant to be an exhaustive guide to how to build a backend for Chartwerk. They simply explain the basic assumptions chartwerk-editor makes about the backend and what it does.
6 |
7 | We'll make mention of [django-chartwerk](https://github.com/DallasMorningNews/django-chartwerk/), a Django-based backend for Chartwerk, in a couple places by way of example, not as a way to describe how the backend _must_ behave.
8 |
9 | - [Backend API](#api)
10 | - [Context supplied to chartwerk-editor](#context)
11 | - [Baking Chartwerk charts](#baking)
12 |
13 | ### Backend API {#api}
14 |
15 | Chartwerk-editor presumes your backend provides a RESTful API. Specifically, you'll need endpoints for charts, templates and template tags. For example:
16 |
17 | Charts
18 | > `api/charts/
11 |
12 |
13 | 1. A user brings tabular data to the Chartwerk Editor. This step presumes she has already determined which chart type she wants to make and the Editor is preloaded with that chart template.
14 | 2. The user makes selections in the Editor that tell Chartwerk which columns in her data to use to draw the chart and how different features of the chart should be formatted, for example, axes and labels.
15 | 3. Chartwerk takes those user selections and any defaults which are part of the chart template and turns them into an API, which is defined as a global object, `chartwerk`.
16 | 4. The chart template includes scripts written to consume the API and draw the chart using any dependencies needed. These scripts are called in the Editor -- namely, the globally defined `draw()` function -- and create a live preview of the chart for the user.
17 | 5. After a user saves their chart, the Chartwerk backend app saves the user-customized API in a database and uses it to "bake out" two flat HTML files: one for for each size of chart, double and single-wide. Each flat file will call the chart's global drawing function, just as in the Editor, and draw the chart on the page. The file is saved on Amazon S3 or another hosting service or server and can then be embedded via an iframe into another page.
18 |
19 | ### Ownership of tasks in Chartwerk
20 |
21 | - **Users** supply data and use the Editor's UI to identify data columns.
22 |
23 | - **The Editor** turns user selections into an API, draws a preview and persists charts and templates to the backend.
24 |
25 | - **Developers** write the chart scripts to consume the API and can also customize those scripts for any one chart or to create a new template.
26 |
27 | - **The backend** application serves templates to load into the Editor, persists charts and templates to a database and bakes charts out to flat HTML.
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/docs/img/datamap/base.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/datamap/base.png
--------------------------------------------------------------------------------
/docs/img/datamap/data_series.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/datamap/data_series.png
--------------------------------------------------------------------------------
/docs/img/datamap/scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/datamap/scale.png
--------------------------------------------------------------------------------
/docs/img/datamap/value.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/datamap/value.png
--------------------------------------------------------------------------------
/docs/img/how-chartwerk-makes-charts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/how-chartwerk-makes-charts.png
--------------------------------------------------------------------------------
/docs/img/screenshots/api_tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/api_tree.png
--------------------------------------------------------------------------------
/docs/img/screenshots/base_axis_date.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/base_axis_date.png
--------------------------------------------------------------------------------
/docs/img/screenshots/color_legend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/color_legend.png
--------------------------------------------------------------------------------
/docs/img/screenshots/color_scale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/color_scale.png
--------------------------------------------------------------------------------
/docs/img/screenshots/color_scheme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/color_scheme.png
--------------------------------------------------------------------------------
/docs/img/screenshots/data_classify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/data_classify.png
--------------------------------------------------------------------------------
/docs/img/screenshots/dependencies.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/dependencies.png
--------------------------------------------------------------------------------
/docs/img/screenshots/double_wide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/double_wide.png
--------------------------------------------------------------------------------
/docs/img/screenshots/editor_full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/editor_full.png
--------------------------------------------------------------------------------
/docs/img/screenshots/free_annotations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/free_annotations.png
--------------------------------------------------------------------------------
/docs/img/screenshots/margins.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/margins.png
--------------------------------------------------------------------------------
/docs/img/screenshots/raw_data.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/raw_data.png
--------------------------------------------------------------------------------
/docs/img/screenshots/save_chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/save_chart.png
--------------------------------------------------------------------------------
/docs/img/screenshots/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/screenshot.png
--------------------------------------------------------------------------------
/docs/img/screenshots/scripr_editor_select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/scripr_editor_select.png
--------------------------------------------------------------------------------
/docs/img/screenshots/script_editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/script_editor.png
--------------------------------------------------------------------------------
/docs/img/screenshots/shaded_regions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/shaded_regions.png
--------------------------------------------------------------------------------
/docs/img/screenshots/single_wide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/single_wide.png
--------------------------------------------------------------------------------
/docs/img/screenshots/size_select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/size_select.png
--------------------------------------------------------------------------------
/docs/img/screenshots/tabs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/tabs.png
--------------------------------------------------------------------------------
/docs/img/screenshots/template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/template.png
--------------------------------------------------------------------------------
/docs/img/screenshots/template_datamap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/template_datamap.png
--------------------------------------------------------------------------------
/docs/img/screenshots/template_tags.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/template_tags.png
--------------------------------------------------------------------------------
/docs/img/screenshots/template_text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/template_text.png
--------------------------------------------------------------------------------
/docs/img/screenshots/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/text.png
--------------------------------------------------------------------------------
/docs/img/screenshots/value_axis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/img/screenshots/value_axis.png
--------------------------------------------------------------------------------
/docs/introduction.md:
--------------------------------------------------------------------------------
1 | # 
2 |
3 |
4 | ### What is Chartwerk?
5 |
6 | Chartwerk is an application for developing data visualizations and publishing them as embeddable, flat pages to a hosting service such as Amazon S3.
7 |
8 | ### Why Chartwerk?
9 |
10 | Like many other chart builders, Chartwerk provides an interface for non-coders to easily create interactive and static charts. However, you may find, like we did, that most chart makers are set-and-forget systems that aren't well designed to grow with the needs of your team.
11 |
12 | Chartwerk was designed to be a more collaborative tool between coders and non-coders. It lets developers easily build and modify charts on the fly directly alongside users by exposing a robust internal API that translates tabular data into discrete dataviz properties.
13 |
14 | Because chart templates in Chartwerk are arbitrary functions written to consume Chartwerk's API, developers have complete control of the logic used to draw charts and the freedom to use any third-party libraries they like.
15 |
16 | In the newsroom, Chartwerk helps us develop dataviz quickly in response to the needs of beat reporters and scale our development time multiplied by every chart our reporters build from the templates we create.
17 |
18 | That said, Chartwerk may not be the best choice among all other chart builders for your team if you don't have at least one developer to help build up your chart template set.
19 |
20 | ### What's in it?
21 |
22 | Chartwerk actually consists of **two** applications:
23 |
24 | 1. A backend app that maintains RESTFUL endpoints for charts and chart templates, serves navigational pages for users to select the type of chart they'd like to build and handles logic for user accounts and for "baking" charts to S3 or another flat storage service.
25 | 2. A front-end app to create and manipulate charts and chart templates before saving them to the backend.
26 |
27 | Chartwerk-editor represents the latter. You can find an example of the former at [django-chartwerk](https://github.com/DallasMorningNews/django-chartwerk).
28 |
29 | ### OK, so "chartwerk-editor?"
30 |
31 | chartwerk-editor is a React/Redux-based editor for charts and chart templates. It is the heart of Chartwerk.
32 |
33 | It's designed to be flexible for both non-coding chart creators and chart template developers so they can build almost any chart type that can be represented with tabular/spreadsheet data.
34 |
35 | Read on in these docs to learn more about how it works and how you can integrate it into your own application or into a backend like `django-chartwerk`.
36 |
37 | ### Contents
38 |
39 | - [How Chartwerk makes charts](/docs/how-chartwerk-makes-charts.md)
40 | - [Chart template basics](/docs/template-basics.md)
41 | - [Chartwerk's API](/docs/chartwerk_api.md)
42 | - [Integrating chartwerk-editor with a backend](/docs/chartwerk-backend.md)
43 | - [Embedding Chartwerk charts in your CMS](/docs/embedding.md)
44 | - [Developing chartwerk-editor](/docs/developing.md)
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DallasMorningNews/chartwerk-editor/86f7a9d5db3ee980307ca6a84d3b3e53fe8a7751/docs/logo.png
--------------------------------------------------------------------------------
/gulp/index.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 |
3 | module.exports = (tasks) => {
4 | tasks.forEach((name) => {
5 | gulp.task(name, require(`./tasks/${name}`)); // eslint-disable-line global-require
6 | });
7 |
8 | return gulp;
9 | };
10 |
--------------------------------------------------------------------------------
/gulp/server/server.js:
--------------------------------------------------------------------------------
1 | const open = require('open');
2 | const path = require('path');
3 | const express = require('express');
4 | const webpack = require('webpack');
5 | const webpackMiddleware = require('webpack-dev-middleware');
6 | const webpackHotMiddleware = require('webpack-hot-middleware');
7 | const webpackConfigBuilder = require('./../../webpack-dev.config.js');
8 |
9 |
10 | const router = express.Router();
11 | router.get('/', (req, res) => {
12 | res.sendFile(path.join(process.cwd(), 'dist/index.html'));
13 | });
14 |
15 | const app = express();
16 | app.use('/', router);
17 | app.set('view engine', 'html');
18 | app.use(express.static('src'));
19 | app.use('/img', express.static('dist/img'));
20 | app.use('/fonts', express.static('dist/fonts'));
21 |
22 |
23 | module.exports = (port) => {
24 | const webpackConfig = webpackConfigBuilder(port);
25 | const compiler = webpack(webpackConfig);
26 | const middleware = webpackMiddleware(compiler, {
27 | publicPath: webpackConfig.output.publicPath,
28 | });
29 | app.use(middleware);
30 | app.use(webpackHotMiddleware(compiler));
31 |
32 | app.listen(port, () => {
33 | app.keepAliveTimeout = 0;
34 | });
35 |
36 | middleware.waitUntilValid(() => {
37 | console.log(`app started on port ${port}`);
38 | open(`http://localhost:${port}`);
39 | });
40 | };
41 |
--------------------------------------------------------------------------------
/gulp/tasks/api.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const jsonServer = require('gulp-json-srv');
3 |
4 | const server = jsonServer.create({
5 | port: 25252,
6 | id: 'slug',
7 | baseUrl: '/api',
8 | });
9 |
10 | module.exports = () => {
11 | gulp.watch(['./dist/test-api.json'], ['api']);
12 | return gulp.src('./dist/test-api.json')
13 | .pipe(server.pipe());
14 | };
15 |
--------------------------------------------------------------------------------
/gulp/tasks/dev.js:
--------------------------------------------------------------------------------
1 | const startServer = require('../server/server.js');
2 | const { argv } = require('yargs');
3 |
4 | const port = argv.port || 3000;
5 |
6 | module.exports = () => {
7 | startServer(port);
8 | };
9 |
--------------------------------------------------------------------------------
/gulp/tasks/nunjucks.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const nunjucksRender = require('gulp-nunjucks-render');
3 |
4 | module.exports = () =>
5 | gulp.src('src/templates/index.html')
6 | .pipe(nunjucksRender({
7 | path: ['src/templates/'],
8 | }))
9 | .pipe(gulp.dest('dist'));
10 |
--------------------------------------------------------------------------------
/gulp/tasks/production.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const webpack = require('webpack');
3 | const prodConfig = require('../../webpack-prod.config.js');
4 | const webpackStream = require('webpack-stream');
5 |
6 | module.exports = () =>
7 | gulp.src('src/js/*.js*')
8 | .pipe(webpackStream(prodConfig, webpack))
9 | .pipe(gulp.dest('./dist/'))
10 | .on('end', () => {
11 | process.exit();
12 | });
13 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('./gulp')([
2 | 'api',
3 | 'production',
4 | 'dev',
5 | 'nunjucks',
6 | ]);
7 |
8 | gulp.task('watch', () => {
9 | gulp.watch('src/templates/**/*.html', ['nunjucks']);
10 | });
11 |
12 | gulp.task('build', ['nunjucks', 'production']);
13 | gulp.task('default', ['nunjucks', 'watch', 'dev', 'api']);
14 |
--------------------------------------------------------------------------------
/misc/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
73 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chartwerk-editor",
3 | "version": "0.3.3",
4 | "description": "React/Redux chart template editor.",
5 | "main": "src/js/app.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/DallasMorningNews/chartwerk-editor.git"
9 | },
10 | "scripts": {
11 | "test": "mocha --compilers js:babel-register --recursive",
12 | "test:watch": "npm test -- --watch"
13 | },
14 | "author": {
15 | "name": "Jon McClure",
16 | "email": "jon.r.mcclure@gmail.com"
17 | },
18 | "contributors": [
19 | {
20 | "name": "Andrew Chavez",
21 | "email": "adchavez@gmail.com"
22 | }
23 | ],
24 | "keywords": [
25 | "charts",
26 | "dataviz",
27 | "react",
28 | "redux"
29 | ],
30 | "license": "AGPL-3.0",
31 | "dependencies": {
32 | "autoprefixer": "^7.2.3",
33 | "babel-core": "^6.26.0",
34 | "babel-loader": "^7.1.2",
35 | "babel-preset-airbnb": "^2.4.0",
36 | "babel-preset-env": "^1.6.1",
37 | "babel-preset-react": "^6.24.1",
38 | "babel-preset-stage-0": "^6.24.1",
39 | "bootstrap": "~>4.1.2",
40 | "bootstrap-sass": "^3.3.7",
41 | "brace": "^0.8.0",
42 | "chroma-js": "^1.1.1",
43 | "copy-to-clipboard": "^3.0.2",
44 | "core-js": "^2.5.3",
45 | "css-loader": "^0.28.7",
46 | "csvtojson": "^1.1.9",
47 | "d3": "^4.12.2",
48 | "ellipsize": "0.0.2",
49 | "es6-promise": "^3.2.1",
50 | "eslint": "^3.19.0",
51 | "eslint-config-airbnb": "^15.0.1",
52 | "eslint-plugin-import": "^2.2.0",
53 | "eslint-plugin-jsx-a11y": "^5.0.1",
54 | "eslint-plugin-react": "^7.0.1",
55 | "expect": "^1.20.2",
56 | "exports-loader": "^0.6.4",
57 | "express": "^4.16.2",
58 | "extract-text-webpack-plugin": "^3.0.2",
59 | "geostats": "^1.5.0",
60 | "glob": "^7.1.2",
61 | "gulp": "^3.9.1",
62 | "gulp-json-srv": "^1.0.1",
63 | "gulp-nunjucks-render": "^2.0.0",
64 | "html2canvas": "^1.0.0-alpha.10",
65 | "imports-loader": "^0.7.1",
66 | "isomorphic-fetch": "^2.2.1",
67 | "jquery": "^3.2.1",
68 | "js-cookie": "^2.1.2",
69 | "lodash": "^4.17.4",
70 | "marked": "^0.3.5",
71 | "mocha": "^3.0.2",
72 | "moment": "^2.13.0",
73 | "node-sass": "^4.7.2",
74 | "normalize-scss": "^7.0.0",
75 | "object-assign": "^4.0.1",
76 | "open": "^0.0.5",
77 | "optimize-css-assets-webpack-plugin": "^3.2.0",
78 | "postcss-loader": "^2.0.9",
79 | "react": "^15.0.0",
80 | "react-ace": "^3.4.1",
81 | "react-addons-css-transition-group": "^15.0.2",
82 | "react-dom": "^15.5.4",
83 | "react-json-table": "^0.1.1",
84 | "react-json-tree": "^0.10.0",
85 | "react-modal": "^1.4.0",
86 | "react-redux": "^4.4.1",
87 | "react-select": "^1.0.0-beta13",
88 | "react-toggle": "^2.1.0",
89 | "react-typeahead": "^2.0.0-alpha.5",
90 | "redux": "^3.3.1",
91 | "redux-devtools": "^3.1.1",
92 | "redux-thunk": "^2.1.0",
93 | "sass-loader": "^6.0.6",
94 | "simplemde": "^1.11.2",
95 | "string": "^3.3.1",
96 | "style-loader": "^0.19.1",
97 | "svg-style-inliner": "0.0.2",
98 | "uglifyjs-webpack-plugin": "^1.1.5",
99 | "url-join": "^1.1.0",
100 | "validator": "^5.5.0",
101 | "vinyl-fs": "^2.4.3",
102 | "webpack": "^3.10.0",
103 | "webpack-dev-middleware": "^2.0.3",
104 | "webpack-hot-middleware": "^2.21.0",
105 | "webpack-stream": "^4.0.0",
106 | "whatwg-fetch": "^2.0.3",
107 | "yargs": "^10.0.3"
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require('autoprefixer');
2 |
3 | module.exports = {
4 | plugins: [
5 | autoprefixer(),
6 | ],
7 | };
8 |
--------------------------------------------------------------------------------
/src/js/actions/api.js:
--------------------------------------------------------------------------------
1 | import { locations } from './../misc/config';
2 |
3 | import * as uiActions from './ui';
4 | import * as dataActions from './data';
5 | import * as axisActions from './axis';
6 | import * as marginActions from './margin';
7 | import * as scriptActions from './script';
8 | import * as textActions from './text';
9 | import * as templateActions from './template';
10 | import * as embedActions from './embed';
11 |
12 |
13 | export default function fetchWerk() {
14 | const endpoint = window.chartwerkConfig.chart_id !== '' ?
15 | locations.chart : locations.template;
16 | return dispatch => fetch(endpoint)
17 | .then(
18 | response => response.json())
19 | .then(
20 | (response) => {
21 | const data = response.data;
22 | // Dispatch API actions for data props
23 | if (data.data) {
24 | dispatch(dataActions.apiData(data.data));
25 | }
26 | if (data.scripts) {
27 | dispatch(scriptActions.apiScripts(data.scripts));
28 | }
29 | if (data.axes) {
30 | dispatch(axisActions.apiAxes(data.axes));
31 | }
32 | if (data.datamap) {
33 | dispatch(dataActions.apiDatamap(data.datamap));
34 | }
35 | if (data.margins) {
36 | dispatch(marginActions.apiMargins(data.margins));
37 | }
38 | if (data.ui) {
39 | dispatch(uiActions.apiUI(data.ui));
40 | }
41 | if (data.text) {
42 | dispatch(textActions.apiText(data.text));
43 | }
44 | if (data.template) {
45 | dispatch(templateActions.apiTemplate(data.template));
46 | }
47 | if (data.embed) {
48 | dispatch(embedActions.apiEmbed(data.embed));
49 | }
50 | })
51 | .catch((error) => {
52 | console.log('API ERROR', error);
53 | console.log('ERROR STACK', error.stack);
54 | });
55 | }
56 |
--------------------------------------------------------------------------------
/src/js/actions/data.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiData = data => ({
4 | type: types.API_DATA,
5 | data,
6 | });
7 |
8 | export const apiDatamap = datamap => ({
9 | type: types.API_DATAMAP,
10 | datamap,
11 | });
12 |
13 | export const addBase = column => ({
14 | type: types.ADD_BASE,
15 | column,
16 | });
17 |
18 | export const addValue = column => ({
19 | type: types.ADD_VALUE,
20 | column,
21 | });
22 |
23 | export const addScale = column => ({
24 | type: types.ADD_SCALE,
25 | column,
26 | });
27 |
28 | export const addSeries = column => ({
29 | type: types.ADD_SERIES,
30 | column,
31 | });
32 |
33 | export const addFacet = column => ({
34 | type: types.ADD_FACET,
35 | column,
36 | });
37 |
38 | export const addIgnore = column => ({
39 | type: types.ADD_IGNORE,
40 | column,
41 | });
42 |
43 | export const removeBase = () => ({
44 | type: types.REMOVE_BASE,
45 | });
46 |
47 | export const removeValue = () => ({
48 | type: types.REMOVE_VALUE,
49 | });
50 |
51 | export const removeScale = () => ({
52 | type: types.REMOVE_SCALE,
53 | });
54 |
55 | export const removeSeries = column => ({
56 | type: types.REMOVE_SERIES,
57 | column,
58 | });
59 |
60 | export const removeFacet = () => ({
61 | type: types.REMOVE_FACET,
62 | });
63 |
64 | export const removeIgnore = column => ({
65 | type: types.REMOVE_IGNORE,
66 | column,
67 | });
68 |
69 | export const resetDatamap = () => ({
70 | type: types.RESET_DATAMAP,
71 | });
72 |
73 | export const attachData = data => ({
74 | type: types.ATTACH_DATA,
75 | data,
76 | });
77 |
78 | export const setHeaderSort = data => ({
79 | type: types.SET_HEADER_SORT,
80 | data,
81 | });
82 |
83 | export const setCustomKeys = keys => ({
84 | type: types.SET_CUSTOM_KEYS,
85 | keys,
86 | });
87 |
88 | export const setCustomValue = (key, value) => ({
89 | type: types.SET_CUSTOM_VALUE,
90 | key,
91 | value,
92 | });
93 |
--------------------------------------------------------------------------------
/src/js/actions/embed.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 |
4 | export const apiEmbed = embed => ({
5 | type: types.API_EMBED,
6 | embed,
7 | });
8 |
9 | export const setEmbedDimensions = dimensions => ({
10 | type: types.SET_EMBED_DIMENSIONS,
11 | dimensions,
12 | });
13 |
--------------------------------------------------------------------------------
/src/js/actions/index.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | import * as dataActions from './data';
4 | import * as axisActions from './axis';
5 | import * as marginActions from './margin';
6 | import * as textActions from './text';
7 | import * as templateActions from './template';
8 | import * as scriptActions from './script';
9 | import * as uiActions from './ui';
10 | import * as embedActions from './embed';
11 | import fetchWerk from './api';
12 |
13 |
14 | export default _.assign({},
15 | dataActions,
16 | axisActions,
17 | marginActions,
18 | textActions,
19 | scriptActions,
20 | templateActions,
21 | uiActions,
22 | embedActions,
23 | { fetchWerk },
24 | );
25 |
--------------------------------------------------------------------------------
/src/js/actions/margin.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiMargins = margins => ({
4 | type: types.API_MARGINS,
5 | margins,
6 | });
7 |
8 | export const setMarginSingleTop = percent => ({
9 | type: types.SET_MARGIN_SINGLE_TOP,
10 | percent,
11 | });
12 |
13 | export const setMarginSingleBottom = percent => ({
14 | type: types.SET_MARGIN_SINGLE_BOTTOM,
15 | percent,
16 | });
17 |
18 | export const setMarginSingleRight = percent => ({
19 | type: types.SET_MARGIN_SINGLE_RIGHT,
20 | percent,
21 | });
22 |
23 | export const setMarginSingleLeft = percent => ({
24 | type: types.SET_MARGIN_SINGLE_LEFT,
25 | percent,
26 | });
27 |
28 | export const setMarginDoubleTop = percent => ({
29 | type: types.SET_MARGIN_DOUBLE_TOP,
30 | percent,
31 | });
32 |
33 | export const setMarginDoubleBottom = percent => ({
34 | type: types.SET_MARGIN_DOUBLE_BOTTOM,
35 | percent,
36 | });
37 |
38 | export const setMarginDoubleRight = percent => ({
39 | type: types.SET_MARGIN_DOUBLE_RIGHT,
40 | percent,
41 | });
42 |
43 | export const setMarginDoubleLeft = percent => ({
44 | type: types.SET_MARGIN_DOUBLE_LEFT,
45 | percent,
46 | });
47 |
--------------------------------------------------------------------------------
/src/js/actions/script.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiScripts = scripts => ({
4 | type: types.API_SCRIPTS,
5 | scripts,
6 | });
7 |
8 | export const setDrawScript = script => ({
9 | type: types.SET_DRAW_SCRIPT,
10 | script,
11 | });
12 |
13 | export const setHelperScript = script => ({
14 | type: types.SET_HELPER_SCRIPT,
15 | script,
16 | });
17 |
18 | export const setStyles = styles => ({
19 | type: types.SET_STYLES,
20 | styles,
21 | });
22 |
23 | export const setHTML = html => ({
24 | type: types.SET_HTML,
25 | html,
26 | });
27 |
28 | export const setDependencies = dependencies => ({
29 | type: types.SET_DEPENDENCIES,
30 | dependencies,
31 | });
32 |
--------------------------------------------------------------------------------
/src/js/actions/template.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiTemplate = template => ({
4 | type: types.API_TEMPLATE,
5 | template,
6 | });
7 |
8 | export const setTemplateTitle = title => ({
9 | type: types.SET_TEMPLATE_TITLE,
10 | title,
11 | });
12 |
13 | export const setTemplateDescription = description => ({
14 | type: types.SET_TEMPLATE_DESCRIPTION,
15 | description,
16 | });
17 |
18 | export const setTemplateIcon = icon => ({
19 | type: types.SET_TEMPLATE_ICON,
20 | icon,
21 | });
22 |
23 | export const addTemplateTag = tag => ({
24 | type: types.ADD_TEMPLATE_TAG,
25 | tag,
26 | });
27 |
28 | export const removeTemplateTag = tag => ({
29 | type: types.REMOVE_TEMPLATE_TAG,
30 | tag,
31 | });
32 |
--------------------------------------------------------------------------------
/src/js/actions/text.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiText = texts => ({
4 | type: types.API_TEXT,
5 | texts,
6 | });
7 |
8 | export const setHeadline = headline => ({
9 | type: types.SET_HEADLINE,
10 | headline,
11 | });
12 |
13 | export const setChatter = chatter => ({
14 | type: types.SET_CHATTER,
15 | chatter,
16 | });
17 |
18 | export const setFootnote = footnote => ({
19 | type: types.SET_FOOTNOTE,
20 | footnote,
21 | });
22 |
23 | export const setDataSource = source => ({
24 | type: types.SET_DATASOURCE,
25 | source,
26 | });
27 |
28 | export const setAuthor = author => ({
29 | type: types.SET_AUTHOR,
30 | author,
31 | });
32 |
33 | export const addAnnotation = annotation => ({
34 | type: types.ADD_ANNOTATION,
35 | annotation,
36 | });
37 |
38 | export const removeAnnotation = index => ({
39 | type: types.REMOVE_ANNOTATION,
40 | index,
41 | });
42 |
43 | export const changeAnnotation = (index, annotation) => ({
44 | type: types.CHANGE_ANNOTATION,
45 | index,
46 | annotation,
47 | });
48 |
49 | export const changeAnnotationText = (index, text) => ({
50 | type: types.CHANGE_ANNOTATION_TEXT,
51 | index,
52 | text,
53 | });
54 |
55 | export const changeAnnotationPosition = (index, x, y) => ({
56 | type: types.CHANGE_ANNOTATION_POSITION,
57 | index,
58 | x,
59 | y,
60 | });
61 |
62 | export const changeAnnotationDimensions = (index, width) => ({
63 | type: types.CHANGE_ANNOTATION_DIMENSIONS,
64 | index,
65 | width,
66 | });
67 |
68 | export const changeAnnotationAlign = (index, align) => ({
69 | type: types.CHANGE_ANNOTATION_ALIGN,
70 | index,
71 | align,
72 | });
73 |
74 | export const changeAnnotationFontSize = (index, size) => ({
75 | type: types.CHANGE_ANNOTATION_FONT_SIZE,
76 | index,
77 | size,
78 | });
79 |
80 | export const changeAnnotationBackground = index => ({
81 | type: types.CHANGE_ANNOTATION_BACKGROUND,
82 | index,
83 | });
84 |
85 | export const changeAnnotationSize = (index, size) => ({
86 | type: types.CHANGE_ANNOTATION_SIZE,
87 | index,
88 | size,
89 | });
90 |
91 | export const changeAnnotationColor = (index, color) => ({
92 | type: types.CHANGE_ANNOTATION_COLOR,
93 | index,
94 | color,
95 | });
96 |
97 | export const setLegendActive = () => ({
98 | type: types.SET_LEGEND_ACTIVE,
99 | });
100 |
101 | export const unsetLegend = () => ({
102 | type: types.UNSET_LEGEND,
103 | });
104 |
105 | export const setLegendKeys = keys => ({
106 | type: types.SET_LEGEND_KEYS,
107 | keys,
108 | });
109 |
110 | export const changeLegendKey = (index, color, text) => ({
111 | type: types.CHANGE_LEGEND_KEY,
112 | index,
113 | color,
114 | text,
115 | });
116 |
117 | export const changeLegendKeyOrderUp = index => ({
118 | type: types.CHANGE_LEGEND_KEY_ORDER_UP,
119 | index,
120 | });
121 |
122 | export const changeLegendKeyOrderDown = index => ({
123 | type: types.CHANGE_LEGEND_KEY_ORDER_DOWN,
124 | index,
125 | });
126 |
127 | export const changeLegendTitle = text => ({
128 | type: types.CHANGE_LEGEND_TITLE,
129 | text,
130 | });
131 |
132 | export const changeLegendAlign = (size, align) => ({
133 | type: types.CHANGE_LEGEND_ALIGN,
134 | size,
135 | align,
136 | });
137 |
138 | export const changeLegendBackground = size => ({
139 | type: types.CHANGE_LEGEND_BACKGROUND,
140 | size,
141 | });
142 |
143 | export const changeLegendInside = size => ({
144 | type: types.CHANGE_LEGEND_INSIDE,
145 | size,
146 | });
147 |
148 | export const changeLegendPosition = (size, x, y) => ({
149 | type: types.CHANGE_LEGEND_POSITION,
150 | size,
151 | x,
152 | y,
153 | });
154 |
155 | export const changeLegendWidth = (size, width) => ({
156 | type: types.CHANGE_LEGEND_WIDTH,
157 | size,
158 | width,
159 | });
160 |
161 | export const setChartTitle = title => ({
162 | type: types.SET_CHART_TITLE,
163 | title,
164 | });
165 |
--------------------------------------------------------------------------------
/src/js/actions/ui.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actions';
2 |
3 | export const apiUI = ui => ({
4 | type: types.API_UI,
5 | ui,
6 | });
7 |
8 | export const setRawData = data => ({
9 | type: types.SET_RAW_DATA,
10 | data,
11 | });
12 |
13 | export const changePreview = size => ({
14 | type: types.CHANGE_PREVIEW,
15 | size,
16 | });
17 |
18 | export const setAvailableDataClass = dataClass => ({
19 | type: types.SET_AVAILABLE_DATA_CLASS,
20 | dataClass,
21 | });
22 |
23 | export const setDataClassAlias = (dataClass, alias) => ({
24 | type: types.SET_DATA_CLASS_ALIAS,
25 | dataClass,
26 | alias,
27 | });
28 |
29 | export const syncCustomClasses = classes => ({
30 | type: types.SYNC_CUSTOM_CLASSES,
31 | classes,
32 | });
33 |
--------------------------------------------------------------------------------
/src/js/client.js:
--------------------------------------------------------------------------------
1 | import renderer from './client/index';
2 |
3 | renderer.render();
4 |
--------------------------------------------------------------------------------
/src/js/client/annotations.js:
--------------------------------------------------------------------------------
1 | import marked from './../misc/utils';
2 | import { black } from './../constants/colors';
3 |
4 | /**
5 | * Render annotations for appropriate size rendered chart.
6 | * @return {null}
7 | */
8 | export default function () {
9 | const werk = window.chartwerk;
10 | const chart = $('#chart');
11 | chart.css({ position: 'relative' });
12 |
13 | $('#chart .annotation.label').remove();
14 |
15 | werk.text.annotations.forEach((d, i) => {
16 | if (
17 | (d.size === 'd' && werk.ui.size === 'double') ||
18 | (d.size === 's' && werk.ui.size === 'single')
19 | ) {
20 | const text = marked.inlineLexer(d.text, []);
21 |
22 | const annotation =
23 | `${text}
26 |
actions.changePreview('single')}
78 | alt="Single-wide"
79 | />
80 | 
actions.changePreview('double')}
85 | alt="Double-wide"
86 | />
87 |
96 | {options}
97 | | Categorical | 124 |Sequential | 125 |Diverging | 126 |
|---|---|---|
| {schemes.categorical} | 131 |{schemes.sequential} | 132 |{schemes.diverging} | 133 |
99 | Successfully parsed {this.state.format} data 100 | 105 |
106 |79 | Patch backpack journalist commenters newsroom cafe paywall he said 80 | she said reporting, analytics crowdfunding advertising just across 81 | the wire monetization blowing up on Twitter paidContent. 82 |
83 | 84 | 85 | 86 |87 | Article Skimmer Groupon should isn't a business model digital first 88 | location-based Snarkmarket curmudgeon tags. What Would Google Do try 89 | PR Arianna AOL metered model twitterati This Week in Review. 90 |
91 |92 | Pictures of Goats section #twittermakesyoustupid, curation Nook 93 | newspaper strike gotta grok it before you rock it newsonomics 94 | copyright bot paidContent, Wilonsky hot news doctrine media diet audience 95 | atomization overcome iPhone app filters horse-race coverage Gutenberg 96 | parenthesis. Josh Marshall just across the wire the audience knows 97 | more than I do social media Romenesko open source Sulzberger 98 | Pictures of Goats section filters abundance crowdsourcing 100 | rubber cement, paidContent startups should isn't a business model. 101 |
102 |
10 | 
12 |
13 | No commas, currency symbols, percent signs or
14 | other textual notations on numbers. Your data must have a header row.
15 |
16 |
17 | 