status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added images

This commit is contained in:
Abhinandan Kushwaha 2021-08-09 05:15:48 +05:30
parent e0eaec7978
commit 8bbbef1296
5 changed files with 200 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
demos/altBars.svg Normal file
View File

@ -0,0 +1,53 @@
<svg id="UI_Element_Light_Column_charts_Single_chart_01" data-name="UI Element/Light/Column charts/Single chart 01" xmlns="http://www.w3.org/2000/svg" width="315" height="390" viewBox="0 0 315 390">
<g id="UI_Element_Column_charts_Single_chart_01" data-name="UI Element/Column charts/Single chart 01">
<g id="Mobile-chart-background">
<rect id="Rectangle_Copy_16" data-name="Rectangle Copy 16" width="315" height="390" rx="12" fill="#fff"/>
</g>
<g id="Chart" transform="translate(5 114)">
<g id="Chart-grid">
<g id="y-axis">
<text id="_0" data-name="0" transform="translate(0 221)" fill="#7c828a" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="26.8" y="12">0</tspan></text>
<text id="_250" data-name="250" transform="translate(0 144)" fill="#7c828a" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="12.4" y="12">250</tspan></text>
<text id="_500" data-name="500" transform="translate(0 67)" fill="#7c828a" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="12.4" y="12">500</tspan></text>
<text id="_750" data-name="750" transform="translate(0 0)" fill="#7c828a" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="12.4" y="12">750</tspan></text>
</g>
<g id="x-axis" transform="translate(42 244)">
<text id="M" transform="translate(0 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="8.948" y="12">M</tspan></text>
<text id="T" transform="translate(106.5 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="10.268" y="12">T</tspan></text>
<text id="S" transform="translate(179.5 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="10.094" y="12">S</tspan></text>
<text id="S-2" data-name="S" transform="translate(216 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="10.094" y="12">S</tspan></text>
<text id="T-2" data-name="T" transform="translate(36.5 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="10.268" y="12">T</tspan></text>
<text id="F" transform="translate(143 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="10.568" y="12">F</tspan></text>
<text id="W" transform="translate(73 0)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="5.81" y="12">W</tspan></text>
</g>
</g>
<path id="Average-line" d="M.5.5h248" transform="translate(33 90)" fill="none" stroke="#7c828a" stroke-miterlimit="10" stroke-width="1" stroke-dasharray="1 3"/>
<g id="column-charts" transform="translate(46 11)">
<g id="Charts_Columns_Bars_Single-column-size01" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(216 103)">
<rect id="Rectangle_Copy_21" data-name="Rectangle Copy 21" width="20" height="118" rx="4" fill="rgba(115,136,169,0.35)"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-2" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(180 130)">
<rect id="Rectangle_Copy_21-2" data-name="Rectangle Copy 21" width="20" height="91" rx="4" fill="rgba(115,136,169,0.35)"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-3" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(144 40)">
<rect id="Rectangle_Copy_21-3" data-name="Rectangle Copy 21" width="20" height="181" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-4" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(108 110)">
<rect id="Rectangle_Copy_21-4" data-name="Rectangle Copy 21" width="20" height="111" rx="4" fill="rgba(115,136,169,0.35)"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-5" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(72)">
<rect id="Rectangle_Copy_21-5" data-name="Rectangle Copy 21" width="20" height="221" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-6" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(36 66)">
<rect id="Rectangle_Copy_21-6" data-name="Rectangle Copy 21" width="20" height="155" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size01-7" data-name="Charts/Columns&amp;Bars/Single-column-size01" transform="translate(0 143)">
<rect id="Rectangle_Copy_21-7" data-name="Rectangle Copy 21" width="20" height="78" rx="4" fill="rgba(115,136,169,0.35)"/>
</g>
</g>
</g>
<path id="more" d="M14.684,4.019A2.269,2.269,0,0,1,14,2.352,2.269,2.269,0,0,1,14.684.684a2.376,2.376,0,0,1,3.336,0A2.269,2.269,0,0,1,18.7,2.352a2.269,2.269,0,0,1-.683,1.668,2.376,2.376,0,0,1-3.336,0Zm-7,0A2.269,2.269,0,0,1,7,2.352,2.269,2.269,0,0,1,7.683.684a2.376,2.376,0,0,1,3.336,0A2.269,2.269,0,0,1,11.7,2.352a2.269,2.269,0,0,1-.683,1.668,2.376,2.376,0,0,1-3.336,0Zm-7,0A2.267,2.267,0,0,1,0,2.352,2.267,2.267,0,0,1,.684.684,2.267,2.267,0,0,1,2.352,0,2.267,2.267,0,0,1,4.019.684,2.267,2.267,0,0,1,4.7,2.352a2.267,2.267,0,0,1-.684,1.668A2.267,2.267,0,0,1,2.352,4.7,2.267,2.267,0,0,1,.684,4.019Z" transform="translate(274 32.148)"/>
<text id="Additional_text" data-name="Additional text" transform="translate(16 56)" fill="#7c828a" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Daily average</tspan></text>
<text id="Numbers" transform="translate(16 17)" font-size="28" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="0" y="28">$ 476</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
demos/area.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 462 KiB

76
demos/barPairs.svg Normal file
View File

@ -0,0 +1,76 @@
<svg id="UI_Element_Dark_Column_charts_Clustered_column_2_categories" data-name="UI Element/Dark/Column charts/Clustered column 2 categories" xmlns="http://www.w3.org/2000/svg" width="315" height="362" viewBox="0 0 315 362">
<g id="UI_Element_Column_charts_Clustered_column_2_categories_Copy" data-name="UI Element/Column charts/Clustered column 2 categories Copy">
<g id="Mobile-chart-background">
<rect id="Rectangle_Copy_16" data-name="Rectangle Copy 16" width="315" height="362" rx="12" fill="#333340"/>
</g>
<g id="Chart" transform="translate(18 116)">
<g id="y-axis">
<text id="_0K" data-name="$0K" transform="translate(0 180)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="12.064" y="12">$0K</tspan></text>
<text id="_25K" data-name="$25K" transform="translate(0 120)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="4.864" y="12">$25K</tspan></text>
<text id="_50K" data-name="$50K" transform="translate(0 60)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="4.864" y="12">$50K</tspan></text>
<text id="_75K_" data-name="$75K " transform="translate(0 0)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="4.864" y="12">$75K</tspan></text>
</g>
<g id="x-axis" transform="translate(52 208)">
<text id="Jun" transform="translate(198)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="4.634" y="12">Jun</tspan></text>
<text id="May" transform="translate(158)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="2.468" y="12">May</tspan></text>
<text id="Apr" transform="translate(118)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="3.41" y="12">Apr</tspan></text>
<text id="Mar" transform="translate(80)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="1.766" y="12">Mar</tspan></text>
<text id="Feb" transform="translate(41)" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="3.752" y="12">Feb</tspan></text>
<text id="Jan" fill="rgba(255,255,255,0.35)" font-size="12" font-family="NunitoSans-ExtraBold, Nunito Sans" font-weight="800"><tspan x="4.892" y="12">Jan</tspan></text>
</g>
<g id="Columns" transform="translate(58 11)">
<g id="category-02" transform="translate(10 78)">
<g id="Charts_Columns_Bars_Single-column-size02" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(198 31)">
<rect id="Rectangle_Copy_35" data-name="Rectangle Copy 35" width="8" height="72" rx="4" fill="#ec6666"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-2" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(158)">
<rect id="Rectangle_Copy_35-2" data-name="Rectangle Copy 35" width="8" height="103" rx="4" fill="#ec6666"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-3" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(118 54)">
<rect id="Rectangle_Copy_35-3" data-name="Rectangle Copy 35" width="8" height="49" rx="4" fill="#ec6666"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-4" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(79 42)">
<rect id="Rectangle_Copy_35-4" data-name="Rectangle Copy 35" width="8" height="61" rx="4" fill="#ec6666"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-5" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(41 5)">
<rect id="Rectangle_Copy_35-5" data-name="Rectangle Copy 35" width="8" height="98" rx="4" fill="#ec6666"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-6" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(0 54)">
<rect id="Rectangle_Copy_35-6" data-name="Rectangle Copy 35" width="8" height="49" rx="4" fill="#ec6666"/>
</g>
</g>
<g id="category-01">
<g id="Charts_Columns_Bars_Single-column-size02-7" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(198 25)">
<rect id="Rectangle_Copy_35-7" data-name="Rectangle Copy 35" width="8" height="156" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-8" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(158 47)">
<rect id="Rectangle_Copy_35-8" data-name="Rectangle Copy 35" width="8" height="134" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-9" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(118 101)">
<rect id="Rectangle_Copy_35-9" data-name="Rectangle Copy 35" width="8" height="80" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-10" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(79)">
<rect id="Rectangle_Copy_35-10" data-name="Rectangle Copy 35" width="8" height="181" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-11" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(41 62)">
<rect id="Rectangle_Copy_35-11" data-name="Rectangle Copy 35" width="8" height="119" rx="4" fill="#147ad6"/>
</g>
<g id="Charts_Columns_Bars_Single-column-size02-12" data-name="Charts/Columns&amp;Bars/Single-column-size02" transform="translate(0 90)">
<rect id="Rectangle_Copy_35-12" data-name="Rectangle Copy 35" width="8" height="91" rx="4" fill="#147ad6"/>
</g>
</g>
</g>
</g>
<g id="Labels" transform="translate(68 60)">
<g id="Point_02" data-name="Point 02" transform="translate(108)">
<text id="Point_02-2" data-name="Point 02" transform="translate(15)" fill="rgba(255,255,255,0.65)" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Point 02</tspan></text>
<circle id="Point_02_-_color" data-name="Point 02 - color" cx="4" cy="4" r="4" transform="translate(0 6)" fill="#ec6666"/>
</g>
<g id="Point_01" data-name="Point 01">
<text id="Point_01-2" data-name="Point 01" transform="translate(15)" fill="rgba(255,255,255,0.65)" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Point 01</tspan></text>
<circle id="Point_01_-_color" data-name="Point 01 - color" cx="4" cy="4" r="4" transform="translate(0 6)" fill="#147ad6"/>
</g>
</g>
<text id="Chart_title" data-name="Chart title" transform="translate(0 19)" fill="#fff" font-size="22" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="54.034" y="22">Chart title goes here</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
demos/lineArea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

71
demos/pielabbelled.svg Normal file
View File

@ -0,0 +1,71 @@
<svg id="UI_Element_Light_Donut_03-categories" data-name="UI Element/Light/Donut/03-categories" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="315" height="402" viewBox="0 0 315 402">
<defs>
<filter id="Oval_Copy_17" x="188.5" y="140.5" width="98" height="97" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="8.5" result="blur"/>
<feFlood flood-opacity="0.165"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Oval_Copy_17-2" x="27" y="175.5" width="98" height="97" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="8.5" result="blur-2"/>
<feFlood flood-opacity="0.165"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Oval_Copy_17-3" x="40.5" y="57.5" width="98" height="97" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="8.5" result="blur-3"/>
<feFlood flood-opacity="0.165"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="UI_elements_Donut_03-categories" data-name="UI elements/Donut/03-categories">
<g id="Mobile-chart-background">
<rect id="Rectangle_Copy_16" data-name="Rectangle Copy 16" width="315" height="402" rx="12" fill="#fff"/>
</g>
<g id="Labels" transform="translate(65 297)">
<g id="Category-03" transform="translate(1 60)">
<text id="Long_category_label_03" data-name="Long category label 03" transform="translate(17)" fill="#7c828a" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Long category label 03</tspan></text>
<circle id="Category_03_-_color" data-name="Category 03 - color" cx="5" cy="5" r="5" transform="translate(0 6)" fill="#ec6666"/>
</g>
<g id="Category-02" transform="translate(1 30)">
<text id="Long_category_label_02" data-name="Long category label 02" transform="translate(17)" fill="#7c828a" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Long category label 02</tspan></text>
<circle id="Category_02_-_color" data-name="Category 02 - color" cx="5" cy="5" r="5" transform="translate(0 6)" fill="#79d2de"/>
</g>
<g id="Category-01">
<text id="Long_category_label_01" data-name="Long category label 01" transform="translate(17)" fill="#7c828a" font-size="16" font-family="NunitoSans-Regular, Nunito Sans"><tspan x="0" y="16">Long category label 01</tspan></text>
<circle id="Category_01_-_color" data-name="Category 01 - color" cx="5" cy="5" r="5" transform="translate(0 6)" fill="#147ad6"/>
</g>
</g>
<g id="Donut_size_04" data-name="Donut/size 04" transform="translate(49 80)">
<g id="Donut_chart" data-name="Donut chart" transform="translate(10 1)">
<rect id="Rectangle_Copy_13" data-name="Rectangle Copy 13" width="157" height="172" rx="12" transform="translate(13 12.5)" fill="none"/>
<path id="Donut_0" d="M18.646,0A91.484,91.484,0,0,1,100.7,50.644a89.774,89.774,0,0,1-9.982,95.5A91.87,91.87,0,0,1,1.023,179.3L0,179.094,8.084,139.92A51.878,51.878,0,0,0,59.294,121.4a49.774,49.774,0,0,0,5.564-53A51.475,51.475,0,0,0,19.236,40l-.59,0Z" transform="translate(72.958 0.5)" fill="#147ad6"/>
<path id="Donut_1" d="M.756,0,40.425,5.132a50.441,50.441,0,0,0,38.9,55.69l.77.167-8.188,39.153A90.439,90.439,0,0,1,.585,1.4Z" transform="translate(0.998 78.934)" fill="#79d2de"/>
<path id="Donut_2" d="M89.837,0V40A50.763,50.763,0,0,0,39.778,83.785l-.1.763L0,79.452A90.782,90.782,0,0,1,88.472.01Z" transform="translate(1.163 0.5)" fill="#ec6666"/>
</g>
</g>
<g id="Tooltip_circle" data-name="Tooltip/circle" transform="translate(214 166)">
<g transform="matrix(1, 0, 0, 1, -214, -166)" filter="url(#Oval_Copy_17)">
<ellipse id="Oval_Copy_17-4" data-name="Oval Copy 17" cx="23.5" cy="23" rx="23.5" ry="23" transform="translate(214 166)" fill="#fff"/>
</g>
<text id="_26_" data-name="26%" transform="translate(3 13.5)" font-size="16" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="4.34" y="16">54%</tspan></text>
</g>
<g id="Tooltip_circle-2" data-name="Tooltip/circle" transform="translate(52.5 201)">
<g transform="matrix(1, 0, 0, 1, -52.5, -201)" filter="url(#Oval_Copy_17-2)">
<ellipse id="Oval_Copy_17-5" data-name="Oval Copy 17" cx="23.5" cy="23" rx="23.5" ry="23" transform="translate(52.5 201)" fill="#fff"/>
</g>
<text id="_26_2" data-name="26%" transform="translate(3 13.5)" font-size="16" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="4.34" y="16">30%</tspan></text>
</g>
<g id="Tooltip_circle-3" data-name="Tooltip/circle" transform="translate(66 83)">
<g transform="matrix(1, 0, 0, 1, -66, -83)" filter="url(#Oval_Copy_17-3)">
<ellipse id="Oval_Copy_17-6" data-name="Oval Copy 17" cx="23.5" cy="23" rx="23.5" ry="23" transform="translate(66 83)" fill="#fff"/>
</g>
<text id="_26_3" data-name="26%" transform="translate(3 13.5)" font-size="16" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="4.332" y="16">26%</tspan></text>
</g>
<text id="Chart_title" data-name="Chart title" transform="translate(0 28)" font-size="22" font-family="NunitoSans-Bold, Nunito Sans" font-weight="700"><tspan x="54.034" y="22">Chart title goes here</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB