Skip to content

Commit

Permalink
Merge pull request #117 from yml-org/release/v2.1.0
Browse files Browse the repository at this point in the history 
Release/v2.1.0
  • Loading branch information
@dkk009
dkk009 authored Jun 30, 2023
2 parents 6ef0c8d + b5c83ff commit 20b41b5
Show file tree
Hide file tree
Showing 2 changed files with 239 additions and 10 deletions.
247 changes: 238 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,60 @@
# YCharts

YCharts is a light and extensible chart library for Jetpack Compose system. It comprises two main modules:
YCharts is a Jetpack-compose based charts library which enables developers to easily integrate various types of charts/graphs into their existing ui to visually represent statistical data. YCharts supports both cartesian(XY-charts) and polar charts(Radial charts), which include:

A. Cartesian charts:
1. Line chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/58352fc4-8039-46e6-9248-1f338efc705d"/>
</figure>
</div>

2. Bar chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/5af22ba1-232f-4d1a-8067-c08f56a61b13"/>
</figure>
</div>

3. Wave chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/be694054-d5cc-49ec-b7ee-be80c1562df7"/>
</figure>
</div>

4. Bubble chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/cb177d4d-3fa8-4171-b3bd-7064458b1964"/>
</figure>
</div>
5. Combined chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/809bff58-a857-4ed1-8415-cd1d97be300f"/>
</figure>
</div>

B.Radial charts:
1. Pie chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/ac6eb6c7-033d-439b-b416-d6083ba0ee83"/>
</figure>
</div>
2. Donut chart
<div>
<figure>
<img width=100 src="https://github.com/AkYML/YCharts/assets/102035914/3296d983-4a9a-4b91-8b46-49f84a80041c"/>
</figure>
</div>




It comprises two main modules:

- `YChartslib` (Chart components for Jetpack Compose)
- `app` (sample app to showcase chart components)
Expand All @@ -12,7 +66,7 @@ You can add the library via Maven:
Gradle:

```groovy
implementation 'co.yml:ycharts:2.0.0'
implementation 'co.yml:ycharts:2.1.0'
```

## Modules
Expand Down Expand Up @@ -100,11 +154,18 @@ Let's see how we can use the chart components and style them with available cust

<figure>
<div align = "center">
<img width=317 src="https://user-images.githubusercontent.com/107846675/189699724-c8064338-8894-45e2-b60b-3d830123e813.png" />
<p> Line chart looks like this!</p>
<img width=317 src="https://github.com/AkYML/YCharts/assets/102035914/58352fc4-8039-46e6-9248-1f338efc705d"/>
<p> Line chart looks like this! </p>

<img width=317 src="https://github.com/AkYML/YCharts/assets/102035914/a5d5c153-c2df-43d7-8d05-41548ed64e5c"/>
<p> Line chart with dots looks like this! </p>

</div>
</figure>




### 2. Bar Chart:

- Create list of barChartData using the random generator extension and `BarData` data class.
Expand Down Expand Up @@ -152,11 +213,15 @@ Let's see how we can use the chart components and style them with available cust

<figure>
<div align = "center">
<img width=347 src="https://user-images.githubusercontent.com/107846675/189836621-eeac8181-f7de-491e-8fd8-7e1276e2fb9f.png" />
<img width=347 src="https://github.com/AkYML/YCharts/assets/102035914/0d2a6cfd-98c4-46ee-92a7-b88814f8d186" />
<p> Bar chart looks like this!</p>
<img width=347 src="https://github.com/AkYML/YCharts/assets/102035914/6dec92d7-95ed-4892-89b7-44a03d0711b9" />
<p> Horizontal Bar chart looks like this!</p>

</div>
</figure>


### 3. Grouped Bar Chart:

- Create list of grouped combinations of bar chart data using the random generator extension and `BarPlotData` data class.
Expand Down Expand Up @@ -208,8 +273,10 @@ Let's see how we can use the chart components and style them with available cust

<figure>
<div align = "center">
<img width=338 src="https://user-images.githubusercontent.com/107846675/189845009-6ef2ccc6-3c75-446e-9273-fe1b1e1e94d0.png" />
<img width=338 src="https://github.com/AkYML/YCharts/assets/102035914/55df945d-bcd9-4b08-b47e-5d439a7abf39" />
<p> Grouped Bar chart looks like this!</p>
<img width=338 src="https://github.com/AkYML/YCharts/assets/102035914/00af9045-4054-4544-b4c5-93b568df2b85" />
<p> Stacked Bar chart looks like this!</p>
</div>
</figure>

Expand Down Expand Up @@ -253,11 +320,20 @@ Let's see how we can use the chart components and style them with available cust

<figure>
<div align = "center">
<img width=238 src="https://user-images.githubusercontent.com/107846675/189865767-377f3b12-1568-46c9-a248-6454ed9bb96e.png" />
<img width=238 src="https://github.com/AkYML/YCharts/assets/102035914/457b6034-eef0-4f70-bd40-0fc0e950298a" />
<p> Pie chart looks like this!</p>

<img width=238 src="https://github.com/AkYML/YCharts/assets/102035914/ac6eb6c7-033d-439b-b416-d6083ba0ee83" />
<p> Pie chart with lables like this!</p>

</div>
</figure>






### 5. Donut Chart:

- Similar to pie chart here we need create list of slices using the `PieChartData` data class.
Expand Down Expand Up @@ -300,11 +376,14 @@ Let's see how we can use the chart components and style them with available cust

<figure>
<div align = "center">
<img width=233 src="https://user-images.githubusercontent.com/107846675/189868490-cbaecf87-2beb-4788-ba8e-f57b667cbf10.png" />
<img width=233 src="https://github.com/AkYML/YCharts/assets/102035914/3296d983-4a9a-4b91-8b46-49f84a80041c" />
<p> Donut chart looks like this!</p>
</div>
</figure>




### 6. Combined Chart:

- Similar to line and bar chart we can combine both entities in one chart, just need to initialize the line and bar plot data using the random generator extension and add styling related to individual component.
Expand Down Expand Up @@ -374,12 +453,162 @@ Let's see how we can use the chart components and style them with available cust
_Note_ : To show legends infomartion related to bar, `Legends` component can be used.
<figure>
<div align = "center">
<img width=292 src="https://user-images.githubusercontent.com/107846675/192773924-74421edd-7314-4b44-bdb1-13aaf3598796.png" />
<img width=292 src="https://github.com/AkYML/YCharts/assets/102035914/809bff58-a857-4ed1-8415-cd1d97be300f" />
<p> Combined bar with line chart looks like this!</p>
</div>
</figure>
<br>



### 7. Wave Chart:

- Wave charts, also referred to as waveform charts or waveform displays, are specialized visualizations used primarily in the field of signal processing and electronics. These charts illustrate the amplitude (vertical axis) and time (horizontal axis) of a waveform.

```kotlin
val waveChartData = WaveChartData(
wavePlotData = WavePlotData(
lines = listOf(
Wave(
dataPoints = pointsData,
waveStyle = LineStyle(color = Color.Black),
selectionHighlightPoint = SelectionHighlightPoint(),
shadowUnderLine = ShadowUnderLine(),
selectionHighlightPopUp = SelectionHighlightPopUp(),
waveFillColor = WaveFillColor(topColor = Color.Green, bottomColor = Color.Red),
)
)
),
xAxisData = xAxisData,
yAxisData = yAxisData,
gridLines = GridLines()
)
```

- Initialize X and Y Axis builders using the `AxisData` data class.

```kotlin
val xAxisData = AxisData.Builder()
.axisStepSize(30.dp)
.steps(maxOf(barChartData.size - 1, lineChartData.size - 1))
.bottomPadding(40.dp)
.labelData { index -> index.toString() }
.build()

val yAxisData = AxisData.Builder()
.steps(yStepSize)
.labelAndAxisLinePadding(20.dp)
.axisOffset(20.dp)
.labelData { index -> (index * (maxRange / yStepSize)).toString() }
.build()
```

- Initialize the Wave chart config data with `WaveChartData` data class in order to achieve styling and configurations related to same.

```kotlin
val waveChartData = WaveChartData(
wavePlotData = WavePlotData(
lines = listOf(
Wave(
dataPoints = pointsData,
waveStyle = LineStyle(color = Color.Black),
selectionHighlightPoint = SelectionHighlightPoint(),
shadowUnderLine = ShadowUnderLine(),
selectionHighlightPopUp = SelectionHighlightPopUp(),
waveFillColor = WaveFillColor(topColor = Color.Green, bottomColor = Color.Red),
)
)
),
xAxisData = xAxisData,
yAxisData = yAxisData,
gridLines = GridLines()
)
```

- Finally, use the _**`WaveChart`**_ component to render the chart.
```kotlin
WaveChart(
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
waveChartData = data
)
```
_Note_ : To show legends infomartion related to bar, `Legends` component can be used.
<figure>
<div align = "center">
<img width=292 src="https://github.com/AkYML/YCharts/assets/102035914/be694054-d5cc-49ec-b7ee-be80c1562df7" />
<p> Wavechart looks like this!</p>
<img width=292 src="https://github.com/AkYML/YCharts/assets/102035914/2d8b02af-1252-44fb-83e1-06d1f6230733" />
<p> Sinewavechart looks like this!</p>
</div>
</figure>
<br>

### 8. Bubble Chart:

- Bubble charts are a variation of the scatter plot, where the data points are represented as bubbles or circles instead of simple dots. The bubbles' size represents the value of a third variable, in addition to the x-axis and y-axis variables. Bubble charts are effective in visualizing and comparing three different dimensions of data simultaneously.

```kotlin
val bubbleChartData = BubbleChartData(
DataUtils.getBubbleChartDataWithGradientStyle(pointsData),
xAxisData = xAxisData,
yAxisData = yAxisData,
gridLines = GridLines()
)
```

- Initialize X and Y Axis builders using the `AxisData` data class.

```kotlin
val xAxisData = AxisData.Builder()
.axisStepSize(30.dp)
.steps(maxOf(barChartData.size - 1, lineChartData.size - 1))
.bottomPadding(40.dp)
.labelData { index -> index.toString() }
.build()

val yAxisData = AxisData.Builder()
.steps(yStepSize)
.labelAndAxisLinePadding(20.dp)
.axisOffset(20.dp)
.labelData { index -> (index * (maxRange / yStepSize)).toString() }
.build()
```

- Initialize the Bubble chart config data with `BubbleChartData` data class in order to achieve styling and configurations related to same.

```kotlin
val bubbleChartData = BubbleChartData(
DataUtils.getBubbleChartDataWithGradientStyle(pointsData),
xAxisData = xAxisData,
yAxisData = yAxisData,
gridLines = GridLines()
)

```

- Finally, use the _**`BubbleChart`**_ component to render the chart.
```kotlin
BubbleChart(
modifier = Modifier
.fillMaxWidth()
.height(500.dp),
bubbleChartData = data
)
```
_Note_ : To show legends infomartion related to bar, `Legends` component can be used.
<figure>
<div align = "center">
<img width=292 src="https://github.com/AkYML/YCharts/assets/102035914/be103f93-8562-4939-add8-1693d76441ef" />
<p> Gradient-Bubble chart looks like this!</p>
<img width=292 src="https://github.com/AkYML/YCharts/assets/102035914/cb177d4d-3fa8-4171-b3bd-7064458b1964" />
<p> Bubble chart looks like this!</p>
</div>
</figure>
<br>


## Accessibility Support

To interact with your device with touch and spoken feedback, you can turn on the TalkBack screen reader. TalkBack describes the graphs/charts when tapped on the graph container.
Expand Down
2 changes: 1 addition & 1 deletion YChartsLib/build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ publishing {
register<MavenPublication>("release") {
groupId = "co.yml"
artifactId = "ycharts"
version = "1.0.1"
version = "2.1.0"
afterEvaluate {
from(components["release"])
}
Expand Down

0 comments on commit 20b41b5

Please sign in to comment.