1653022800
React Charty: Data Visualization Component
react-charty
This component was born from the Telegram programming contest where I took one of the prize places. A big thanks to the Telegram team and all contestants. Read further to find usage instructions and how to customize this component.
Please check out the Demo App and Playground for example charts and usage!
Table of contents
- Install
- Features
- Browsers support
- Usage
- Theming
- Props
- Display Data Types
- Using as a standalone library
- Demo App
- Playground
Install
yarn add react-charty
or
npm install react-charty --save
Features
- Small footprint (it's just 12KB minified and gzipped)
- The following chart types are supported: Line, Multi Y Axis Line, Stacked Bar, Percentage, and Pie
- Supports thousands of records (thanks to the fast Segment Tree algorithm)
- A wide variety of supported browsers on different platforms (including mobile)
- Theme support
- Fancy animations
- Zoom-in support
- No dependencies, the core is vanilla Javascript
- Can be used as a standalone library without React
- Different chart types can be combined
Browsers support
 IE 11 / Edge |  Firefox |  Chrome |  Safari |  iOS Safari |  Samsung |  Opera |
|---|
Usage
Here's an example how to get a really basic chart like the one on this screenshot below. This demo is also available in the Playground. For more complex examples please check the Demo App.
import React, { Component } from 'react'
import Charty from 'react-charty'
const MINIMAL_EXAMPLE_DATA = {
type: 'line',
data: {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
y0: [-20, 0, 20, 23, 25, 28, 40, 50, 33, 23, 14, 3, 15, 16, 18, 20, 34, 44, 30, 31, 43, 22, 15, 27, 23]
},
colors: {
y0: '#5FB641'
},
names: {
y0: 'Temperature, C°'
},
startX: 1,
endX: 25,
xAxisStep: 2,
showPreview: false,
showRangeText: false,
showLegendTitle: false
};
export default class App extends Component {
render () {
return (
<Charty title="Temperature" {...MINIMAL_EXAMPLE_DATA} />
)
}
}
Theming
The chart controls can be customized via theme prop. Here's an example of two themes. The LIGHT_THEME is hardcoded in the Charty component and used if no theme is provided. For a theme switching example please check the Demo App. Also, please check styles.css for even more customization.
const LIGHT_THEME = {
grid: { color: '#182D3B', alpha: 0.1, markerFillColor: '#fff', markerRadius: 0 },
legend: { background: '#fff', color: '#000' },
preview: { maskColor: '#E2EEF9', maskAlpha: 0.6, brushColor: '#C0D1E1', brushBorderColor: '#fff', brushBorderAlpha: 1, handleColor: '#fff' },
xAxis: { textColor: '#8E8E93', textAlpha: 1 },
yAxis: { textColor: '#8E8E93', textAlpha: 1 },
title: { color: '#000' },
localRange: { color: '#000' },
zoomedRange: { color: '#000' },
zoomText: { color: '#108BE3' },
zoomIcon: { fill: '#108BE3' },
buttons: { color: '#fff' },
pie: { textColor: '#fff' }
};
const DARK_THEME = {
grid: { color: '#fff', alpha: 0.1, markerFillColor: '#242f3e' },
legend: { background: '#1c2533', color: '#fff' },
preview: { maskColor: '#304259', maskAlpha: 0.6, brushColor: '#56626D', brushBorderAlpha: 0, handleColor: '#fff' },
xAxis: { textColor: '#A3B1C2', textAlpha: 0.6 },
yAxis: { textColor: '#A3B1C2', textAlpha: 0.6 },
title: { color: '#fff' },
localRange: { color: '#fff' },
zoomedRange: { color: '#fff' },
zoomText: { color: '#108BE3' },
zoomIcon: { fill: '#108BE3' },
buttons: { color: '#fff' },
pie: { textColor: '#fff' },
};
Props
| Name | Type | Description |
|---|---|---|
title | String | The chart title. |
type | String | The chart type, can be one of the following values: line, bar, percentage_area, stacked_bar, multi_yaxis, pie. The default value is line. Feel free to check Demo App to see them all in action. |
data | Object | Contains the data points for chart series. Every key of this object is an array of data points. The x array is mandatory and contains the data for x-axis while other keys represent the data points for y-axis. There could be multiple series in one chart and thus several data arrays for y-axis, for example y, y0, y1, yAxis etc. The key name can be any and is used as reference for name, color etc. The key name also defines the rendering order (alphabetically). |
names | Object | Contains the names for data series, referenced by key. For example, names: { y0: 'Views', y1: 'Clicks' }. |
colors | Object | Contains the colors for data series, referenced by key. For example, colors: { y0: '#4BD964', y1: '#FE3C30' }. |
fillColors | Object | Contains the fill colors for data series (only line type is supported for now), referenced by key. A gradient fill is also supported. For example, fillColors: { "y1": "#FE3C3011", "y0": { "type": "linear_gradient_v", "colors": ["#4BD964", "#4BD964", "#FFFFFF00"] }}. |
buttonTextColor | Object | Contains the colors for button caption, referenced by key. |
theme | Object | Contains the color theme for chart components. If omitted, the default theme will be used. |
animated | Boolean | Enables/disables animations and transitions, default value is true. |
startX | Number | The starting position of preview region. If not specified, the starting position of the preview region will be at 2/3 of x axis. |
endX | Number | The ending position of preview region. If not specified, the ending position of the preview region will be at the end of x axis. |
stepX | Number | The value to increase/decrease current x axis position when dragging or moving the chart preview region. For example, if you have X axis of type timestamp and you want to navigate by one day, you can set the stepX value to 86400000. The default value is 1. |
showLegend | Boolean | If set to false the legend will not appear when moving the cursor over the chart (or tapping chart area on mobile). The default value is true. |
hideFromLegend | Object | Allows to hide the series from the legend, referenced by key. For example, hideFromLegend: { y0: true, y1: true } |
disabled | Object | Switches off series, referenced by key. For example, disabled: { y0: true } |
showLegendTitle | Boolean | If set to false the legend title will not appear. The default value is true. |
legendPosition | String | Defines the position of legend popup and can be one of the following values: top, bottom, cursor. The default value is cursor, which means the legend popup will follow the cursor position. |
showMainArea | Boolean | If set to false the main chart area won't be visible. The default value is true. |
showPreview | Boolean | If set to false the chart preview won't be visible. The default value is true. |
showBrush | Boolean | If set to false the brush controls in preview area won't be visible. The default value is true. |
showButtons | Boolean | If set to false the series buttons won't be visible. Also, the buttons are hidden if there's only one series of data. The default value is true. |
showRangeText | Boolean | Show/hide current range text in top right corner. The default value is true. |
rangeTextType | String | Defines the display type of current range. It could be one of the following DDT or can be function that accepts the x value of range starting and ending positions. |
xAxisType | String | Defines the type of x axis. It could be one of the following DDT or can be function that accepts the x value and returns the formatted value. |
yAxisType | String | Defines the type of y axis. It could be one of the following DDT or can be function that accepts the y value and returns the formatted value. |
xAxisStep | Number | Defines the step for x axis. If not specified, the step value will be calculated automatically. |
onZoomIn | Function | This callback is called when some point is clicked on chart. It should accept the clicked x position and must return Promise loading the next chart data. Originally, this callback was used to zoom in, i.e. display more details chart for selected x. But you can also use it to load any supported chart. |
zoomInterval | Number | By default, when zomming, the chart will try to figure out the start and the end of x axis. But you can also set the interval to zoom in (for example, if x axis is a timestamp and you want to zoom in one week, the interval would be 604800000) and chart will put the current position in the middle of this interval. |
zoomStepX | Number | Same as stepX, but for zooming chart. |
autoScale | Boolean | Automatically finds the min/max y values and scales the chart accordingly. If this prop is set to false, the min/max values can be set with minY and maxY props. The default value is true. |
minY | Number | Set the minimum value for y axis. This property is ignored if autoScale is set to true. |
maxY | Number | Set the maximum value for y axis. This property is ignored if autoScale is set to true. |
Display Data Types
Currently the following data types are supported. If no data type is specified the chart assumes it's just an integer value.
| Type | Description |
|---|---|
number | Integer value with thousands separator, i.e. 9 189 141 |
time | Display time in format HH:mm, i.e. 09:42 |
date | Display date in format MMM D, i.e. Jan 1 |
shortDate | Same like date |
longDate | Display date in format D MMM YYYY, i.e. 8 Jun 2003 |
longDateWeekDay | Same like longDate, but prepended with week day ddd, D MMM YYYY, i.e. Sun, 8 sep 2019 |
float1 | Float value with one decimal place, i.e. 45.2 |
float2 | Float value with two decimal places, i.e. 45.24 |
Using as a standalone library
The Charty component can be used as a standalone library without React, for example:
<html>
<head>
<script src="https://unpkg.com/react-charty"></script>
<link rel="stylesheet" href="https://unpkg.com/react-charty/dist/charty.min.css">
...
<script>
window.addEventListener('load', function(){
var props = {
title: '...',
data: {
...
}
...
}
var chart = new Charty('chart1', props);
});
</script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>Author: 99ff00
Source Code: https://github.com/99ff00/react-charty
License: MIT license
What is GEEK
Buddha Community
1598839687
How native is React Native? | React Native vs Native App Development
If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?
In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.
A brief introduction to React Native
Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.
React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.
Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.
Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.
The popularity of React Native comes from its advantages. Some of its advantages are as follows:
- Performance: It delivers optimal performance.
- Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
- UI design: React Native enables you to design simple and responsive UI for your mobile app.
- 3rd party plugins: This framework supports 3rd party plugins.
- Developer community: A vibrant community of developers support React Native.
Why React Native is fundamentally different from earlier hybrid frameworks
Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.
React Native is very close to native. Consider the following aspects as described on the React Native website:
- Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
- Near-native user experience: React Native provides several native components, and these are platform agnostic.
- The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.
Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.
#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native
1620466520
Your Data Architecture: Simple Best Practices for Your Data Strategy
If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.
If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.
In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.
#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition
1617988080
How To Blend Data in Google Data Studio For Better Data Analysis
Using data to inform decisions is essential to product management, or anything really. And thankfully, we aren’t short of it. Any online application generates an abundance of data and it’s up to us to collect it and then make sense of it.
Google Data Studio helps us understand the meaning behind data, enabling us to build beautiful visualizations and dashboards that transform data into stories. If it wasn’t already, data literacy is as much a fundamental skill as learning to read or write. Or it certainly will be.
Nothing is more powerful than data democracy, where anyone in your organization can regularly make decisions informed with data. As part of enabling this, we need to be able to visualize data in a way that brings it to life and makes it more accessible. I’ve recently been learning how to do this and wanted to share some of the cool ways you can do this in Google Data Studio.
#google-data-studio #blending-data #dashboard #data-visualization #creating-visualizations #how-to-visualize-data #data-analysis #data-visualisation
1620629020
Getting Started With Data Lakes
Frameworks for Efficient Enterprise Analytics
The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.
This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.
Introduction
As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).
This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.
#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management
1618039260
How Has COVID-19 Impacted Data Science?
The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.
Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.
#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt