Svg Donught

A responsive svg library for donut formation

Svg Donught is an angular based lightweight library used for making donut chart with svg which make it extra-ordinary responsive even for the mobiile view. You will have full control over the chart.

Demo

You can find the demo link here

Made with by Entangle Software Private Limited

Installation

npm i svg-donught

Usage

1. Register the SvgDonughtModule module into correct module (e.g app.module.ts)

   import { SvgDonughtModule } from 'svg-donught';

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { SvgDonughtModule } from "svg-donught";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SvgDonughtModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Make a variable inside your component of type IDonughtConfig

   import { IDonughtConfig } from 'svg-donught/lib/svg-donught.interface';

import { Component } from "@angular/core";
import { IDonughtConfig } from "svg-donught/lib/svg-donught.interface";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "donught-demo";
  defaultSegmentDonught: IDonughtConfig = {
    donughtSegmentArray: [],
    donughtSegmentTextArray: [],
  };
}

3. Include the app-svg-donught selector into your template

<app-svg-donught [config]="defaultSegmentDonught"></app-svg-donught>

Hurray You are good to go !! 😋 😋

API

import { SvgDonughtModule } from 'svg-donught';

selector: app-svg-donught

Interfaces

• IDonughtConfig - interface for donught configuration
• IDonughtSegmentArrayConfig - interface for donught segment array configuration
• IDonughtTextArrayConfig - interface for donught text array

@Inputs()

Input	Type	Required	Description
config	IDonughtConfig	Yes	Configuration for donught

Interface definitions

IDonughtSegmentArrayConfig

Input	Type	Required	Description	Defaults
strokeColor	string	Yes	Color of donught segment
segmentPercentage	string	Yes	Percentage of donught segment

IDonughtTextArrayConfig

Input	Type	Required	Description	Defaults
text	string	Yes	Configuration for donught
class	string	No	Class of svg text
x	string	No	Horizontal alignment of text	50%
y	string	No	Vertical alignment of text	50%

IDonughtConfig

Input	Type	Required	Description	Defaults
donughtSegmentArray*	IDonughtSegmentArrayConfig	Yes	Segments used for construction of donughts	[]
donughtSegmentTextArray*	IDonughtTextArrayConfig	Yes	Centered text of donught	[]
isSpaceBetweenSegments	boolean	No	Is Space between segment needed	false
defaultSpaceBetweenSegmentPercent	number	No	Percent used for b/w segment	1 % gap b/w segements
height	string	No	Height of donught w.r.t container	100%
width	string	No	Width of donught w.r.t container	100%
viewbox	string	No	View Box of the svg container	0 0 42 42
strokeWidth	string	No	Stroke width of the svg	5
donughtContext	string	No	Context of svg	21
donughtRadius	string	No	Radius of donught	15.91549430918952 [100/2π = 15.91549430918952]
donughtHoleRadius	string	No	Radius of donught	11.1408460164 [70/2π = 11.1408460164]
defaultRingColor	string	No	Default color of ring	#D7E4EC
innerRingColor	string	No	Default color of inner ring	transparent
ringStrokeColor	string	No	Default color of ring stroke	#ccc
donughtHoleColor	string	No	Default color of donught hole	#fff
svgClass	string	No	Default class of svg	donught-svg additional-svg
donughtContainerClass	string	No	Default class of donught container	donught additional-donught
donughtHoleClass	string	No	Default class of donught hole	donught-hole additional-hole
donughtRingClass	string	No	Default class of donught ring	donught-ring additional-ring
donughtSegmentClass	string	No	Default class of donught segment	donught-segment additional-segment
chartTextClass	string	No	Default class of chart text	chart-text additional-chart-text
chartLabelClass	string	No	Default class of chart label	chart-label additional-chart-label

Technologies Used

svg-donught uses following tech to work properly:

• Angular 13 - HTML enhanced for web apps!
• scss - an extension to css

Svg-donught is an open source project with a public repository on GitHub.

Examples configurations

1. Simple one segment configuration donught

oneSegmentConfig: IDonughtConfig = {
  defaultRingColor: "#001f3f",
  donughtSegmentTextArray: [
    {
      text: "One Color",
      class: "first",
    },
    {
      text: "donught",
      class: "second",
    },
  ],
  donughtSegmentArray: [
    {
      strokeColor: "#85144b",
      segmentPercentage: 40,
    },
  ],
};

2. Anti-clockwise space b/w segments one segment donught

oneSegmentConfigAntiClockwiseWithSpace: IDonughtConfig = {
  defaultRingColor: "#001f3f",
  donughtSegmentTextArray: [
    {
      text: "Anti clockwise",
      class: "first",
    },
    {
      text: "space b/w",
      class: "second",
    },
  ],
  donughtSegmentArray: [
    {
      strokeColor: "#85144b",
      segmentPercentage: 40,
    },
  ],
  isAntiClockwise: true,
  isSpaceBetweenSegments: true,
};

3. Three segment donught with space b/w of 12 percent

threeSegmentDonughtWithTwelvePercentWhiteSpace: IDonughtConfig = {
  donughtSegmentArray: [
    {
      strokeColor: "#E3B448",
      segmentPercentage: 40,
    },
    {
      strokeColor: "#CBD18F",
      segmentPercentage: 23,
    },
    {
      strokeColor: "#3A6B35",
      segmentPercentage: 37,
    },
  ],
  donughtSegmentTextArray: [
    {
      text: "3 Segment",
      class: "first",
    },
    {
      text: "space b/w",
      class: "second",
    },
  ],
  isSpaceBetweenSegments: true,
  defaultSpaceBetweenSegmentPercent: 12,
};

Development

Want to contribute? Great! You are welcome here !! Let's build together 🙂

Fork or clone the repo from our repository

git clone https://github.com/entanglesoftware-angular/svg-donught

Open your favorite Terminal and navigate to the project directory.

cd svg-donught

Start the project using following command.

ng serve

Open your favorite browser and hit the url.

http://localhost:4200/

Make a change in your file and instantaneously see your updates!!

License

MIT

🤝 Connect with us:

Want to stay tuned for latest updates or share feedbacks. Follow us at following:

💬 If you have any question/feedback, please do not hesitate to reach out to us at [e-mail]

📈 GitHub Stats