Update README with fork details and current chart examples

README.md

@@ -1,33 +1,51 @@
-# go-charts
+# go-analyze/charts
 
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/go-analzye/charts/blob/master/LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/go-analyze/charts/blob/master/LICENSE)
 [![Build Status](https://github.com/go-analyze/charts/workflows/Test/badge.svg)](https://github.com/go-analyze/charts/actions)
 
-`go-charts` base on [go-chart](https://github.com/wcharczuk/go-chart)，it is simpler way for generating charts, which supports `svg` and `png` format and themes: `light`, `dark`, `grafana` and `ant`. The default format is `png` and the default theme is `light`.
+`go-analyze/charts` is a fork from [vicanso/go-charts](https://github.com/vicanso/go-charts) and based on [wcharczuk/go-chart](https://github.com/wcharczuk/go-chart). Our library focuses on simplifying the generation of beautiful charts and graphs.
 
-`Apache ECharts` is popular among Front-end developers, so `go-charts` supports the option of `Apache ECharts`. Developers can generate charts almost the same as `Apache ECharts`. 
+## Current Project Status
 
-Screenshot of common charts, the left part is light theme, the right part is grafana theme.
+Leveraging the strengths of [vicanso/go-charts](https://github.com/vicanso/go-charts) and [wcharczuk/go-chart](https://github.com/wcharczuk/go-chart), our project introduces enhancements for rendering under challenging conditions and expands functionality with minimal setup. We aim to build upon their solid foundation to offer a more versatile and user-friendly charting solution.
 
-<p align="center">
-    <img src="./assets/go-charts.png" alt="go-charts">
-</p>
+### API Stability
+
+We're committed to refining the API, incorporating feedback and new ideas to enhance flexibility and ease of use.
+
+Until the `v1.0.0` release, API changes should be anticipated. If you require a library with minimal user facing changes this project has not yet reached that level of maturity.
+
+### Changes
+
+Notable improvements in our fork include:
+
+* **Axis Improvements:** Significant enhancements to axis rendering, data range selection, and configuration simplification were made in PR [#3](https://github.com/go-analyze/charts/pull/3).
+* **Theming:** In PR [#4](https://github.com/go-analyze/charts/pull/4) (and some subsequent changes) we introduced `vivid-light` and `vivid-dark` themes for more vibrant visualizations, alongside API changes for greater theme and font control. Long term we plan to make themes easier to mutate and define.
+* **Configuration Simplification:** PR [#5](https://github.com/go-analyze/charts/pull/5) began our effort to streamline chart configuration, making names more descriptive and specific while focusing on a theme-centric approach. Documentation on configuration and use is also being improved.
+* **Expanded Testing:** Ongoing test coverage expansions have led to bug discoveries and fixes. This will continue to help ensure that our charts render perfectly for a wide range of configurations and use.
+
+Our library is a work in progress, aiming to become a standout choice for Go developers seeking powerful, yet easy-to-use charting tools. We welcome contributions and feedback as we continue to enhance our library's functionality, configurability, and reliability.
+
+## Functionality
+
+### Themes
+
+Our built in themes are: `light`, `dark`, `vivid-light`, `vivid-dark`, `ant`, `grafana`
 
 <p align="center">
-    <img src="./assets/go-table.png" alt="go-table">
+    <img src="./assets/themes.png" alt="themes">
 </p>
 
-## Chart Type
+### Chart Types
 
 These chart types are supported: `line`, `bar`, `horizontal bar`, `pie`, `radar` or `funnel` and `table`.
 
-## Example
-
-More examples can be found in the [./examples/](./examples/) directory.
-
+Please see a variety of examples in the [./examples/](./examples/) directory.
 
 ### Line Chart
 
+<img src="./assets/chart-line.png" alt="Line Chart">
+
 ```go
 package main
 
@@ -36,6 +54,7 @@ import (
 )
 
 func main() {
+	// values specified where the first index is for each data series or source, and the second index is for each sample.
 	values := [][]float64{
 		{
 			120,
@@ -47,23 +66,14 @@ func main() {
 			210,
 		},
 		{
-			// snip...
-		},
-		{
-			// snip...
-		},
-		{
-			// snip...
-		},
-		{
-			// snip...
+			// specify values for additional data series
 		},
 	}
 	p, err := charts.LineRender(
 		values,
 		charts.TitleTextOptionFunc("Line"),
 		charts.XAxisDataOptionFunc([]string{
-			"Mon",
+			"Mon",	// notice the 7 labels here match to the 7 samples above
 			"Tue",
 			"Wed",
 			"Thu",
@@ -73,27 +83,17 @@ func main() {
 		}),
 		charts.LegendLabelsOptionFunc([]string{
 			"Email",
-			"Union Ads",
-			"Video Ads",
-			"Direct",
 			"Search Engine",
 		}, charts.PositionCenter),
 	)
-
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
 	// snip...
 }
 ```
 
 ### Bar Chart
 
+<img src="./assets/chart-bar.png" alt="Bar Chart">
+
 ```go
 package main
 
@@ -102,6 +102,7 @@ import (
 )
 
 func main() {
+	// values specified where the first index is for each data series or source, and the second index is for each sample.
 	values := [][]float64{
 		{
 			2.0,
@@ -155,20 +156,14 @@ func main() {
 			)
 		},
 	)
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
 	// snip...
 }
 ```
 
 ### Horizontal Bar Chart
 
+<img src="./assets/chart-horizontal-bar.png" alt="Horizontal Bar Chart">
+
 ```go
 package main
 
@@ -212,20 +207,14 @@ func main() {
 			"World",
 		}),
 	)
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
 	// snip...
 }
 ```
 
 ### Pie Chart
 
+<img src="./assets/chart-pie.png" alt="Pie Chart">
+
 ```go
 package main
 
@@ -267,20 +256,14 @@ func main() {
 		}),
 		charts.PieSeriesShowLabel(),
 	)
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
 	// snip...	
 }
 ```
 
 ### Radar Chart
 
+<img src="./assets/chart-radar.png" alt="Radar Chart">
+
 ```go
 package main
 
@@ -325,60 +308,14 @@ func main() {
 			25000,
 		}),
 	)
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
-	// snip...
-}
-```
-
-### Funnel Chart
-
-```go
-package main
-
-import (
-	"github.com/go-analyze/charts"
-)
-
-func main() {
-	values := []float64{
-		100,
-		80,
-		60,
-		40,
-		20,
-	}
-	p, err := charts.FunnelRender(
-		values,
-		charts.TitleTextOptionFunc("Funnel"),
-		charts.LegendLabelsOptionFunc([]string{
-			"Show",
-			"Click",
-			"Visit",
-			"Inquiry",
-			"Order",
-		}),
-	)
-	if err != nil {
-		panic(err)
-	}
-
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
-	}
 	// snip...
 }
 ```
 
 ### Table
 
+<img src="./assets/chart-table.png" alt="Table">
+
 ```go
 package main
 
@@ -420,7 +357,6 @@ func main() {
 	spans := map[int]int{
 		0: 2,
 		1: 1,
-		// 设置第三列的span
 		2: 3,
 		3: 2,
 		4: 2,
@@ -430,14 +366,38 @@ func main() {
 		data,
 		spans,
 	)
-	if err != nil {
-		panic(err)
-	}
+	// snip...
+}
+```
+
+### Funnel Chart
+
+```go
+package main
+
+import (
+	"github.com/go-analyze/charts"
+)
 
-	buf, err := p.Bytes()
-	if err != nil {
-		panic(err)
+func main() {
+	values := []float64{
+		100,
+		80,
+		60,
+		40,
+		20,
 	}
+	p, err := charts.FunnelRender(
+		values,
+		charts.TitleTextOptionFunc("Funnel"),
+		charts.LegendLabelsOptionFunc([]string{
+			"Show",
+			"Click",
+			"Visit",
+			"Inquiry",
+			"Order",
+		}),
+	)
 	// snip...
 }
 ```
@@ -468,72 +428,3 @@ func main() {
 	// snip...
 }
 ```
-
-## ECharts Option
-
-The name with `[]` is new parameter, others are the same as `echarts`.
-
-- `[type]` The canvas type, support `svg` and `png`, default is `svg`
-- `[theme]` The theme, support `dark`, `light` and `grafana`, default is `light`
-- `[fontFamily]` The font family for chart
-- `[padding]` The padding of chart
-- `[box]` The canvas box of chart
-- `[width]` The width of chart
-- `[height]` The height of chart
-- `title` Title component, including main title and subtitle
-  - `title.text` The main title text, supporting for \n for newlines
-  - `title.subtext`Subtitle text, supporting for \n for newlines
-  - `title.left` Distance between title component and the left side of the container. Left value can be instant pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.
-  - `title.top` Distance between title component and the top side of the container. Top value can be instant pixel value like 20
-  - `title.textStyle.color` Text color for title
-  - `title.textStyle.fontSize` Text font size for title 
-  - `title.textStyle.fontFamily` Text font family for title, it will change the font family for chart
-- `xAxis` The x axis in cartesian(rectangular) coordinate. `go-charts` only support one x axis.
-  - `xAxis.boundaryGap` The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different. If set `null` or `true`, the label appear in the center part of two axis ticks.
-  - `xAxis.splitNumber` Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability
-  - `xAxis.data` Category data, only support string array.
-- `yAxis` The y axis in cartesian(rectangular) coordinate, it support 2 y axis
-  - `yAxis.min` The minimum value of axis. It will be automatically computed to make sure axis tick is equally distributed when not set
-  - `yAxis.max` The maximum value of axis. It will be automatically computed to make sure axis tick is equally distributed when not se.
-  - `yAxis.axisLabel.formatter` Formatter of axis label, which supports string template: `"formatter": "{value} kg"`
-  - `yAxis.axisLine.lineStyle.color` The color for line
-- `legend` Legend component
-  - `legend.show` Whether to show legend
-  - `legend.data` Data array of legend, only support string array: ["Email", "Video Ads"]
-  - `legend.align` Legend marker and text aligning. Support `left` and `right`, default is `left`
-  - `legend.padding` legend space around content
-  - `legend.left` Distance between legend component and the left side of the container. Left value can be instant pixel value like 20; it can also be a percentage value relative to container width like '20%'; and it can also be 'left', 'center', or 'right'.
-  - `legend.top` Distance between legend component and the top side of the container. Top value can be instant pixel value like 20
-- `radar` Coordinate for radar charts
-  - `radar.indicator` Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart
-    - `radar.indicator.name` Indicator's name
-    - `radar.indicator.max` The maximum value of indicator
-    - `radar.indicator.min` The minimum value of indicator, default value is 0.
-- `series` The series for chart 
-  - `series.name` Series name used for displaying in legend.
-  - `series.type` Series type: `line`, `bar`, `pie`, `radar` or `funnel`
-  - `series.radius` Radius of Pie chart:`50%`, default is `40%`
-  - `series.yAxisIndex` Index of y axis to combine with, which is useful for multiple y axes in one chart
-  - `series.label.show` Whether to show label
-  - `series.label.distance` Distance to the host graphic element
-  - `series.label.color` Label color
-  - `series.itemStyle.color` Color for the series's item 
-  - `series.markPoint` Mark point in a chart.
-  - `series.markPoint.symbolSize` Symbol size, default is `30` 
-  - `series.markPoint.data` Data array for mark points, each of which is an object and the type only support `max` and `min`: `[{"type": "max"}, {"type": "min"}]`
-  - `series.markLine` Mark line in a chart
-  - `series.markPoint.data`  Data array for mark points, each of which is an object and the type only support `max`, `min` and `average`: `[{"type": "max"}, {"type": "min"}, {"type": "average"}]``
-  - `series.data` Data array of series, which can be in the following forms:
-    - `value` It's a float array: [1.1, 2,3, 5.2]
-    - `object` It's a object value array: [{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]
-- `[children]` The options of children chart
-
-
-## Performance
-
-Generate a png chart will be less than 20ms. It's better than using `chrome headless` with `echarts`.
-
-```bash
-BenchmarkMultiChartPNGRender-8                78          15216336 ns/op         2298308 B/op       1148 allocs/op
-BenchmarkMultiChartSVGRender-8               367           3356325 ns/op        20597282 B/op       3088 allocs/op
-```