diff --git a/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.ts b/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.ts
new file mode 100644
index 00000000..9d512791
--- /dev/null
+++ b/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.ts
@@ -0,0 +1,136 @@
+import Vue from "vue";
+import { Component, Prop, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class DoughnutChart extends Vue {
+ @Prop({ required: true, default: 0 })
+ value: number;
+
+ @Prop({ required: false, default: "#1791ff" })
+ valueColor: string;
+
+ @Prop({ required: false, default: 8 })
+ valueWidth: number;
+
+ @Prop({ required: false, default: "%" })
+ valueMisure: string;
+
+ @Prop({ required: false, default: 300 })
+ angleSize: number;
+
+ @Prop({ required: false, default: 5 })
+ interval: number;
+
+ @Prop({ required: false, default: 2 })
+ intervalSpace: number;
+
+ @Prop({ required: false, default: "#bbbcbc" })
+ intervalColor: string;
+
+ @Prop({ required: false, default: 4 })
+ intervalWidth: number;
+
+
+ cx: number = 56;
+ cy: number = 54;
+ radius: number = 40;
+
+ gtorad: number = 0.0174533;
+ // totalSize: number = 360 - 62;
+
+ get totalSize(){
+ return this.angleSize;
+ }
+
+ get differenceAngleSize(){
+ return (360 - this.angleSize);
+ }
+
+ get zeroAngle()
+ {
+ return 90 + (this.angleSize / 2);
+ }
+
+ get fullAngle()
+ {
+ return 90 - (this.angleSize / 2);
+ }
+
+ get middleIntervalSpace(){
+ return this.intervalSpace / 2;
+ }
+
+ get getValue(){
+ let radius = (this.radius - (this.valueWidth - (this.intervalWidth - 2)));
+ let size = this.size(this.value);
+ let longArc = size >= 180;
+ return this.getArcPath(this.cx, this.cy, radius, this.zeroAngle * this.gtorad, (this.zeroAngle - size) * this.gtorad, longArc, true);
+ }
+
+ get intervals(){
+
+ if(this.interval <= 0)
+ return null
+
+ let intervals: string[] = [];
+
+ let step = (this.angleSize / this.interval);
+ let current = this.fullAngle;
+
+
+ while(current < (this.zeroAngle))
+ {
+ let start = current + this.middleIntervalSpace;
+ let end = ((current + step) - this.middleIntervalSpace);
+ intervals.push(this.getArcPath(this.cx, this.cy, this.radius, start * this.gtorad, end * this.gtorad, false, false));
+ current = (current + step);
+
+ // this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, -59 * this.gtorad, -1 * this.gtorad, false, false));
+ // this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 1 * this.gtorad, 59 * this.gtorad, false, false));
+ // this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 61 * this.gtorad, 119 * this.gtorad, false, false));
+ // this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 121 * this.gtorad, 179 * this.gtorad, false, false));
+ // this.intervals.push(this.getArcPath(this.cx, this.cy, this.radius, 181 * this.gtorad, 239 * this.gtorad, false, false));
+ }
+ return intervals;
+ }
+
+ get steps(){
+ if(this.interval <= 0)
+ return null
+
+ let intervals: {x: number, y: number, value: number}[] = [];
+
+ let step = (this.angleSize / this.interval);
+ let current = this.fullAngle;
+
+
+ for (let index = (this.interval); index >= 0; index--) {
+ let point = this.getPoint(this.cx, this.cy, current * this.gtorad, this.radius + (this.intervalWidth * 2));
+ intervals.push({x: point[0], y: point[1], value: Math.floor((100 / this.interval) * index)});
+ current += step
+ }
+ return intervals;
+ }
+
+ size(percentage){
+ return (this.totalSize * percentage / 100);
+ }
+
+ getArcPath(cx: number, cy: number, radius: number, from: number, to:number, largeArcFlag: boolean = false, clockWise: boolean = true) : string{
+ radius = radius - this.intervalWidth;
+ let result: string = `M${this.getPoint(cx, cy, from, radius).join(" ")} `; //start point
+ result += `A ${radius} ${radius} `; //radius
+ result += `0 `; //x-axis-rotation
+ result += `${largeArcFlag ? 1 : 0} `; //large-arc-flag
+ result += `${clockWise ? 1 : 0} `; //sweep-flag
+ result += `${this.getPoint(cx, cy, to, radius).join(" ")}`; //end point;
+ return result;
+ }
+
+ getPoint(x: number, y: number, angle: number, radius: number)
+ {
+ return [((radius * Math.cos(angle)) + x), (y - (radius * Math.sin(angle)))];
+ }
+
+
+}
diff --git a/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.vue b/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.vue
new file mode 100644
index 00000000..4e3c6481
--- /dev/null
+++ b/Step/wwwroot/src/components/doughnut-chart/doughnut-chart.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
diff --git a/Step/wwwroot/src/components/doughnut-chart/index.js b/Step/wwwroot/src/components/doughnut-chart/index.js
new file mode 100644
index 00000000..5befbd2a
--- /dev/null
+++ b/Step/wwwroot/src/components/doughnut-chart/index.js
@@ -0,0 +1,5 @@
+import DoughnutChart from "./doughnut-chart.vue";
+
+export {
+ DoughnutChart
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts
index f3d669cd..32041086 100644
--- a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts
+++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts
@@ -84,6 +84,7 @@ export default class TimeLineChartRow extends Vue {
let diffDays = this.diffDays;
let diffHours = this.diffHours;
+ debugger;
if (diffDays <= 1) {
step = this.oneHour;
let check = Math.ceil(diffHours / this.interval);
diff --git a/Step/wwwroot/src/main.js b/Step/wwwroot/src/main.js
index a55ee80a..ff7efc09 100644
--- a/Step/wwwroot/src/main.js
+++ b/Step/wwwroot/src/main.js
@@ -10,8 +10,6 @@ import { Factory, MessageService } from "src/_base";
// import VueDragDrop from 'vue-drag-drop';
// Vue.use(VueDragDrop);
-// var JustGage = require("justgage/justgage.js");
-
const App = () =>
import ("./App.vue");