svg-donught v0.0.9

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()

Interface definitions

IDonughtSegmentArrayConfig

IDonughtTextArrayConfig

IDonughtConfig

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 tech@entanglesoftware.com

📈 GitHub Stats