Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Overview

Synchro Charts

Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

You can learn more about what Synchro Charts at https://synchrocharts.com/.

Design

Learn more about design in the documentation.

Packages

The Synchro Chart mono-repo containing the following packages:

synchro-charts

@awslabs/synchro-charts is the core library which exposes all Synchro Charts components in the form of web-components, generated by StencilJS.

Learn more here.

synchro-charts-react

@awslabs/synchro-charts-react is a thin wrapper around the Synchro Charts components, to expose them as React components.

Learn more here.

doc-site

The document site is a GitHub page which is used to deploy the documentation site at https://synchrocharts.com/.

Learn more here.

Security

See CONTRIBUTING for more information.

License

This project is licensed under the Apache-2.0 License.

Comments
  • Feature/dial

    Feature/dial

    Overview

    Provide an explanation of what the change is

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 30
  • Add the small rounded corner of a ring and recalculate the label and …

    Add the small rounded corner of a ring and recalculate the label and …

    Overview

    Add the small rounded corner of a ring, on the <Dial /> widget.

    Recalculate the label and icon positions when the size is updated.

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 13
  • Add sc-dial component and sc-dial-base component.

    Add sc-dial component and sc-dial-base component.

    Overview

    • Add sc-dial component.
    • Accept the parameters dataStream and associatedDataStreams rather than dataStreams property.
    • Add size property to customize the thickness of DIAL, font size, etc.

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 6
  • Annotation Jumps Around

    Annotation Jumps Around

    Describe the bug When you have multiple charts and have multiple annotations in each of the chart, changing an annotation via dragging would cause another annotation to jump around. See video.

    I think this affects thresholds too.

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://synchrocharts.com/#/Features/Annotation
    2. Click around the annotations. See video

    Expected behavior Maybe not have the annotation jump around when its not being dragged?

    Or, if they are all in the same group, maybe changing one annotation would automatically change all the other chart's annotation to have it sync up.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: mac Big Sur 11.6 (20G165)
    • Browser: chrome
    • Version 94.0.4606.97

    Additional context Add any other context about the problem here

    https://user-images.githubusercontent.com/80849383/137533684-a4738d95-f17d-4011-ae8c-443a56f6bf61.mov

    .

    bug IMPORTANT 
    opened by occhangg 6
  • Feature dial

    Feature dial

    Overview

    Provide an explanation of what the change is

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 5
  • Fix Cypress issues

    Fix Cypress issues

    Description of changes:

    • Add awsui style
    • Fix webpackComplilation error

    Note:

    • snapshot added are from name change
    =============================== Coverage summary ===============================
    Statements   : 89.42% ( 2433/2721 )
    Branches     : 84.62% ( 1128/1333 )
    Functions    : 86.38% ( 501/580 )
    Lines        : 89.06% ( 2321/2606 )
    ================================================================================
    
    Test Suites: 75 passed, 75 total
    Tests:       6 skipped, 1219 passed, 1225 total
    Snapshots:   4 passed, 4 total
    Time:        92.224s
    Ran all test suites.
    

    By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

    opened by ashika01 4
  • chore: release 7.1.3

    chore: release 7.1.3

    :robot: I have created a release beep boop

    synchro-charts: 7.1.3

    7.1.3 (2022-12-29)

    Bug Fixes

    • do not call dateRangeChange in live mode (#220) (a1934cc)
    • do not emit dateRangeChange in live mode (#210) (290098b)
    synchro-charts-react: 7.1.3

    7.1.3 (2022-12-29)

    Miscellaneous Chores

    • synchro-charts-react: Synchronize undefined versions

    Dependencies

    • The following workspace dependencies were updated
      • dependencies
        • @synchro-charts/core bumped from ^7.1.2 to ^7.1.3
    root: 7.1.3

    7.1.3 (2022-12-29)

    Bug Fixes

    • do not call dateRangeChange in live mode (#220) (a1934cc)
    • do not emit dateRangeChange in live mode (#210) (290098b)

    This PR was generated with Release Please. See documentation.

    autorelease: tagged 
    opened by github-actions[bot] 3
  • chore: release 7.1.1

    chore: release 7.1.1

    :robot: I have created a release beep boop

    synchro-charts: 7.1.1

    7.1.1 (2022-12-20)

    Bug Fixes

    • do not emit dateRangeChange in live mode (#210) (290098b)
    synchro-charts-react: 7.1.1

    7.1.1 (2022-12-20)

    Miscellaneous Chores

    • synchro-charts-react: Synchronize undefined versions

    Dependencies

    • The following workspace dependencies were updated
      • dependencies
        • @synchro-charts/core bumped from ^7.0.0 to ^7.1.1
    root: 7.1.1

    7.1.1 (2022-12-20)

    Bug Fixes

    • do not emit dateRangeChange in live mode (#210) (290098b)

    This PR was generated with Release Please. See documentation.

    autorelease: tagged 
    opened by github-actions[bot] 3
  • doc-site demo and documentation update with draggable annotations and annotation labels

    doc-site demo and documentation update with draggable annotations and annotation labels

    • Update demo with draggable annotations feature + annotation labels
    • Update documentation with draggable annotations feature

    Screen Shot 2021-08-06 at 4 36 32 PM

    By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

    opened by luo-anthony-aws 3
  • feat(sc-grid-tooltip): Added input parameters

    feat(sc-grid-tooltip): Added input parameters

    Overview

    Added input parameters at(sc-grid-tooltip): Two more inputs, value(optional) and unit(optional), are added.
    Changed the input parameter type of messageOverrides to solve the problem of hard coding.

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 2
  • fix: remove global html font-size, adjust styles and integration tests

    fix: remove global html font-size, adjust styles and integration tests

    Overview

    Major css fix, removes font-size for the HTML element as this impose the base unit for the css. We should leave this definition to the consumers of this package.

    Tests

    unit tests integ tests

    Legal

    This project is available under the Apache 2.0 License.

    opened by fpauer 2
  • fix(dial/gauge): missing tooltip information

    fix(dial/gauge): missing tooltip information

    Overview

    fix(dial/gauge): missing tooltip information. https://github.com/awslabs/synchro-charts/issues/201

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 0
  • fix(dial/gauge): remove transitions entirely

    fix(dial/gauge): remove transitions entirely

    Overview

    fix(dial/gauge): remove transitions entirely. https://github.com/awslabs/synchro-charts/issues/204

    Tests

    [Include a link to the passing GitHub action running the test suite here.]

    Legal

    This project is available under the Apache 2.0 License.

    opened by jiaoyangChen 0
  • dial/gauge: remove transitions entirely

    dial/gauge: remove transitions entirely

    the arcs in dial and gauge should not 'transition' when values changed. instead the visualizations should immediately reflect the current value displayed.

    bug 
    opened by diehbria 0
Releases(synchro-charts-v7.1.3)
Owner
Amazon Web Services - Labs
AWS Labs
Amazon Web Services - Labs
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for dr

null 7k Dec 24, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
A simple ember component for adding Charts

Ember Chart This Ember CLI addon is a simple wrapper for ChartJS (v2.9). Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js v10 or

Ahmed Omran 136 Oct 24, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
Visualize COVID-19 risky addresses in Shanghai.

Visualize COVID-19 risky addresses in Shanghai.

null 51 Dec 19, 2022
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created

Brian Vaughn 512 Jan 2, 2023
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022