Sucrose Charts: SugarCRM's Chart Library based on D3.js
JavaScript HTML CSS Makefile
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_dev Remove unneeded canvg packages and relocate misc dev files Mar 26, 2018
build SCR-23: Update nightmare library to pick up security vulnerability in… Mar 28, 2018
examples Update Makefile md target to produce github style formatting Apr 20, 2018
scripts SCR-22: repair x-axis date format and tick line styling Mar 5, 2018
src Verify tick label is not empty before calculating collision. Mar 21, 2018
test SCR-22: repair x-axis date format and tick line styling Mar 5, 2018
.codecov.yml SCR-2: add code coverage integration with codecov.io Jul 23, 2017
.eslintignore add eslinting and fix all listing errors May 9, 2017
.eslintrc.json SCR-21: Build scripts revision Jan 27, 2018
.gitignore Add opensans font to examples site Mar 21, 2018
.gjslintrc update make file and add .gjslintrc Feb 11, 2016
.jshintrc D3v4: update build system using modules and rollup Nov 15, 2016
.npmignore exclude presentations folder from NPM Oct 27, 2017
.travis.yml SCR-2: update .travis.yml to report code coverage Jul 24, 2017
CONTRIBUTING.md Update README and Contributing Terms to use same PDF as other projects Jan 14, 2016
CONTRIBUTOR_TERMS.pdf Update README and Contributing Terms to use same PDF as other projects Jan 14, 2016
CREDITS.md examples: add credits doc and update examples footer Oct 21, 2017
LICENSE update license to include NVD3 and D3 licenses Dec 19, 2015
MAKE.md Update Makefile md target to produce github style formatting Apr 20, 2018
Makefile Update Makefile md target to produce github style formatting Apr 20, 2018
README.md Fix usage code snippet and add NPM link to README and examples index Mar 26, 2018
THIRD_PARTY_LICENSES.pdf Add Third Party Licenses documentation Jan 20, 2016
index.js SCR-21: Build scripts revision Jan 27, 2018
package-lock.json SCR-23: Update nightmare library to pick up security vulnerability in… Mar 28, 2018
package.json SCR-23: Update nightmare library to pick up security vulnerability in… Mar 28, 2018

README.md

Sucrose

npm version Build Status codecov

SugarCRM's Business Chart Library based on D3 and using the NVD3 reusable component pattern. This SVG chart library was created to provide a:

  • flexible integration within the Sugar development environment
  • single library for both desktop and mobile applications
  • responsive content and formatting controls
  • internationalization and localization support
  • clean styling for legibility and clarity
  • uses ES6 modules for custom builds for selected chart types
  • over 1,800 unit, integration and data transform tests

Using

This library is dependent on the D3 library so you will need to include that library before Sucrose. D3 version 4.13.0 is the currently supported version and the prebuilt version included in the Sucrose repo is a custom bundle with a subset of D3 modules. Assuming you have downloaded the following files from the Sucrose GitHub Repository local to your webpage:

  1. Include a link tag to the sucrose.min.css in you document head
<link rel="stylesheet" href="sucrose.min.css">
  1. Include the following script tags at the bottom of your document:
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="sucrose.min.js"></script>

To render a chart, instantiate a new chart model, configure chart with options, bind data to a SVG container and call the chart model.

<div id="chart_" class="chart">
  <svg class="sucrose sc-chart"></svg>
</div>
var myChart = sucrose.charts.pieChart()

myChart.options({
    "tooltips": true,
    "donut": true,
    "maxRadius": 250,
    "showLabels": true
  });

d3.select('#chart_ svg')
  .attr('class', 'sucrose sc-chart sc-chart-pie')
  .datum(data)
    .call(myChart);

Chart config options can be found in the API docs. Example data can be found in /examples/data or /test/files/transform.

Examples

The Sucrose Charts example application is available at sucrose.io with configurator, data editor and development package download. The following chart types are currently available:

To view the example application locally,

  1. From the root of the repo directory, run make examples-prod.
  2. Open a browser to sucrose/examples/index.html.
  3. The examples application is a stand-alone single page application which will run offline.
  4. Instruction for using the example application coming soon.

To develop the example application,

  1. Follow the instructions below to verify the build environment is up and running.
  2. From the root of the repo directory, run: make examples-dev.
  3. Open a browser to sucrose/examples/index.html.
  4. The production application is cached in the browser with a manifest and appcache so you may need to clear the application storage cache when changing from production to development.
  5. Run make help from the /examples directory to see a full list of make commands for rebuilding specific code components.

Building

If you are developing new charts in Sucrose you can set up a dev environment with:

  1. Clone this repo: git clone git@github.com:sugarcrm/sucrose.git
  2. Go to the cloned repo directory: cd ./sucrose
  3. To install the NPM packages needed for building the Sucrose source code (including Js, Css, D3 dependencies, and localization resources), run: make dev
  4. To rebuild the entire Sucrose library during development run the make commands: make clean and then make all
  5. Verify that the following core Sucrose files are still in the /build directory:
    • sucrose.js
    • sucrose.min.js
    • sucrose.css
    • sucrose.min.css
    • sucrose.node.js
  6. You should also see the l10n support (see l10n README for more details):
    • translation.json
    • locales.json
  7. You should also see the following third-party library files:
    • d3.js
    • d3.min.js
    • topojson.js
    • topojson.min.js
  8. To just compile the Sucrose Js file, run: make sucrose
  9. To compile a custom bundle of Sucrose and D3 for SugarCRM, run: make sgr
  10. To see a full list of make commands for building specific code components, run: make help

Testing

Unit and integration tests can be run with and without code coverage reporting, from within the repo root:

  1. for unit tests run: npm run test-unit
  2. for DOM (simple integration) tests run: npm run test-dom
  3. for integration tests running in a headless browser run: npm run test-int
  4. for all tests run: npm test

For code coverage analysis first run npm run instrument in order to generate the needed instrumented source files, then:

  1. for unit test code coverage run: npm run cover-unit
  2. for DOM test code coverage run: npm run cover-dom
  3. for integration test code coverage run: npm run cover-int
  4. for complete code coverage run: npm run cover-all

After running unit or DOM code coverage tests, then run npm run cover-rpt to generate a coverage report at /coverage/lcov-report/index.html. The cover-all or cover-int NPM scripts run the coverage report automatically. The results of all coverage runs are merged automatically by nyc. See the testing README for more details.

Contributing:

See CONTRIBUTING for how you can contribute changes back into this project.

Features

  • Check out the live Examples at sucrose.io

Contributing

Everyone is welcome to contribute to Sucrose! If you make a contribution, then the Contributor Terms apply to your submission.

Please check out our Contribution Guidelines for requirements that will allow us to accept your pull request.

License

Copyright 2018 SugarCRM, Licensed by SugarCRM under the Apache 2.0 license.