first commit

public/style/scss/components/charts/_chart-amchart.scss

@@ -0,0 +1,207 @@
+#revenue-chart {
+    height: 27.7rem;
+}
+
+// #finance_graph, #revenue_graph {
+//     height: 29.625rem;
+// }
+
+#duration-value-axis {
+    height: 27.6rem;
+    width: 100%;
+}
+
+#combined-bullet { 
+    height: 28.125rem;
+    width: 100%;
+}
+
+#zoomable-chart {
+    height: 28.125rem;
+    width: 100%;
+}
+
+#chartMap {
+    height: 28.125rem;
+    width: 100%;
+}
+
+#professional-candlesticks {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#comparing-stock-indices {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#multiple-panel-data {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#depth-chart {
+    width: 100%;
+    height: 28.125rem;
+}
+
+// #btc1 {
+//     width: 100%;
+//     height: 31.25rem;
+
+//     @include respond('phone') {
+//         margin-bottom: 5.625rem;
+//         padding-bottom: 2.5rem;
+//         height: 25rem;
+
+//         fieldset {
+
+//             div {
+//                 display: block !important;
+//                 margin-bottom: 0.625rem;
+
+//                 input {
+//                     display: block;
+//                     margin-bottom: 0.3125rem;
+//                 }
+//             }
+    
+//             div:last-child {
+//                 float: none !important;
+//             }
+//         }
+//     }
+// }
+
+.amcharts-export-menu {
+    display: none;
+}
+
+.amcharts-data-set-selector-div {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    width: 16.875rem;
+    margin: 0 auto;
+    select {
+        border: 0;
+        margin-left: 0.625rem;
+        background: #ddd;
+        color: $black;
+    }
+}
+
+.amChartsInputField {
+    border: 0;
+    background: $primary;
+    color: $white;
+    padding: 0.3125rem 0.9375rem;
+    margin: 0 0.9375rem;
+}
+
+.amcharts-data-set-select {
+    border: 0;
+    background: #ddd;
+    color: $black;
+}
+
+.amcharts-period-input,
+.amcharts-period-input-selected {
+    border: 0;
+    margin-left: 0.625rem;
+    background: $primary;
+    color: $white;
+    padding: 0.3125rem 0.9375rem;
+}
+
+/////////////////////
+// CSS Animation
+///////////////////
+.amcharts-graph-g2 .amcharts-graph-stroke {
+    stroke-dasharray: 3px 3px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    -webkit-animation: am-moving-dashes 1s linear infinite;
+    animation: am-moving-dashes 1s linear infinite;
+}
+
+@-webkit-keyframes am-moving-dashes {
+    100% {
+        stroke-dashoffset: -1.9375rem;
+    }
+}
+
+@keyframes am-moving-dashes {
+    100% {
+        stroke-dashoffset: -1.9375rem;
+    }
+}
+
+.lastBullet {
+    -webkit-animation: am-pulsating 1s ease-out infinite;
+    animation: am-pulsating 1s ease-out infinite;
+}
+
+@-webkit-keyframes am-pulsating {
+    0% {
+        stroke-opacity: 1;
+        stroke-width: 0px;
+    }
+    100% {
+        stroke-opacity: 0;
+        stroke-width: 3.125rem;
+    }
+}
+
+@keyframes am-pulsating {
+    0% {
+        stroke-opacity: 1;
+        stroke-width: 0px;
+    }
+    100% {
+        stroke-opacity: 0;
+        stroke-width: 3.125rem;
+    }
+}
+
+.amcharts-graph-column-front {
+    -webkit-transition: all .3s .3s ease-out;
+    transition: all .3s .3s ease-out;
+}
+
+.amcharts-graph-column-front:hover {
+    fill: #496375;
+    stroke: #496375;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out;
+}
+
+@-webkit-keyframes am-draw {
+    0% {
+        stroke-dashoffset: 500%;
+    }
+    100% {
+        stroke-dashoffset: 0%;
+    }
+}
+
+@keyframes am-draw {
+    0% {
+        stroke-dashoffset: 500%;
+    }
+    100% {
+        stroke-dashoffset: 0%;
+    }
+}
+
+.amChartsPeriodSelector {
+    &>fieldset>div {
+        @include respond('tab-port') {
+            float: none !important;
+            display: block !important;
+            margin-bottom: 0.625rem;
+        }
+    }
+}

public/style/scss/components/charts/_chart-c3.scss

@@ -0,0 +1,13 @@
+
+.c3{
+    height: 250px;
+}
+.c3-legend-item {
+    fill: #9fabb1;
+ }
+
+ .c3 .c3-axis-x path, 
+ .c3 .c3-axis-x line, 
+ .c3 .c3-axis-y path, 
+.c3 .c3-axis-y line, 
+.tick text { stroke: $white; }

public/style/scss/components/charts/_chart-chartist.scss

@@ -0,0 +1,127 @@
+
+
+
+.ct-golden-section:before {
+    float: none;
+  }
+  .ct-chart {
+    max-height: 15.7rem;
+  }
+  .ct-chart .ct-label {
+    fill: #a3afb7;
+    color: #a3afb7;
+    font-size: 0.75rem;
+    line-height: 1;
+ }
+  .ct-grid {
+    stroke: rgba(49, 58, 70, 0.1);
+  }
+  .ct-chart.simple-pie-chart-chartist .ct-label {
+    color: #ffffff;
+    fill: #ffffff;
+    font-size: 0.625rem;
+  }
+  .ct-chart .ct-series.ct-series-a .ct-bar,
+  .ct-chart .ct-series.ct-series-a .ct-line,
+  .ct-chart .ct-series.ct-series-a .ct-point,
+  .ct-chart .ct-series.ct-series-a .ct-slice-donut {
+    stroke: $primary;
+  }
+  .ct-chart .ct-series.ct-series-b .ct-bar,
+  .ct-chart .ct-series.ct-series-b .ct-line,
+  .ct-chart .ct-series.ct-series-b .ct-point,
+  .ct-chart .ct-series.ct-series-b .ct-slice-donut {
+    stroke: $success;
+  }
+  .ct-chart .ct-series.ct-series-c .ct-bar,
+  .ct-chart .ct-series.ct-series-c .ct-line,
+  .ct-chart .ct-series.ct-series-c .ct-point,
+  .ct-chart .ct-series.ct-series-c .ct-slice-donut {
+    stroke: $warning;
+  }
+  .ct-chart .ct-series.ct-series-d .ct-bar,
+  .ct-chart .ct-series.ct-series-d .ct-line,
+  .ct-chart .ct-series.ct-series-d .ct-point,
+  .ct-chart .ct-series.ct-series-d .ct-slice-donut {
+    stroke: $danger;
+  }
+  .ct-chart .ct-series.ct-series-e .ct-bar,
+  .ct-chart .ct-series.ct-series-e .ct-line,
+  .ct-chart .ct-series.ct-series-e .ct-point,
+  .ct-chart .ct-series.ct-series-e .ct-slice-donut {
+    stroke: $info;
+  }
+  .ct-chart .ct-series.ct-series-f .ct-bar,
+  .ct-chart .ct-series.ct-series-f .ct-line,
+  .ct-chart .ct-series.ct-series-f .ct-point,
+  .ct-chart .ct-series.ct-series-f .ct-slice-donut {
+    stroke: $dark;
+  }
+  .ct-chart .ct-series.ct-series-g .ct-bar,
+  .ct-chart .ct-series.ct-series-g .ct-line,
+  .ct-chart .ct-series.ct-series-g .ct-point,
+  .ct-chart .ct-series.ct-series-g .ct-slice-donut {
+    stroke: #8d6e63;
+  }
+  .ct-series-a .ct-area,
+  .ct-series-a .ct-slice-pie {
+    fill: $secondary;
+  }
+  .ct-series-b .ct-area,
+  .ct-series-b .ct-slice-pie {
+    fill: #00A2FF;
+  }
+  .ct-series-c .ct-area,
+  .ct-series-c .ct-slice-pie {
+    fill: #ff9800;
+  }
+  .ct-series-d .ct-area,
+  .ct-series-d .ct-slice-pie {
+    fill: #ff9800;
+  }
+  .chartist-tooltip {
+    position: absolute;
+    display: inline-block;
+    opacity: 0;
+    min-width: 0.625rem;
+    padding: 2px 0.625rem;
+    border-radius: 3px;
+    background: #313a46;
+    color: #ffffff;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    -webkit-transition: opacity .2s linear;
+    -moz-transition: opacity .2s linear;
+    -o-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+  }
+  .chartist-tooltip.tooltip-show {
+    opacity: 1;
+  }
+
+
+
+
+
+  #donught_graph {
+    .ct-series.ct-series-a .ct-slice-donut {
+      stroke: #3FC6D4;
+    }
+    
+    .ct-series.ct-series-b .ct-slice-donut {
+      stroke: #333333;
+    }
+
+    .ct-series.ct-series-c .ct-slice-donut {
+      stroke: #F63465;
+    }
+  }
+
+
+#pie-chart .ct-label{
+	@include respond ('phone-land'){
+		color: #fff;
+		fill: #fff;
+	}
+}

public/style/scss/components/charts/_chart-chartjs.scss

@@ -0,0 +1,93 @@
+
+#visitor_graph {
+    height: 253px !important;
+}
+
+#user_rating_graph {
+    height: 280px !important;
+}
+
+#radar_chart, 
+#pie_chart, 
+#doughnut_chart, 
+#polar_chart {
+    // height: 10.875rem!important;
+}
+#visitorOnline{
+    height: 72px !important;
+}
+#trendMeter{
+    height: 72px !important;
+}
+#widget-revenue1,
+#widget-revenue2,
+#widget-revenue3{
+    height: 117px !important;
+}
+#widget-profit1,
+#widget-profit2,
+#widget-profit3{
+    height: 160px !important;
+}
+
+#comparison-rate{
+    height: 230px!important;
+}
+#session_day{
+    height: 175px!important;
+    width: auto!important;
+    margin: 0 auto;
+}
+
+#walet-status {
+    height: 140px!important;
+}
+#bar1 {
+    height: 150px!important;
+}
+#sold-product {
+    height: 230px!important;
+}
+
+
+#chart-venue-expenses,
+#chart-online-sale,
+#chart-gross-sale{
+    height: 150px !important;
+}
+
+
+#areaChart_3{
+    height: 295px !important;
+}
+.chart-point{
+	display:flex;
+	align-items: center;
+	
+	.check-point-area{
+		width:100px;
+		height: 100px;
+		margin-top: -10px;
+		margin-left: -10px;
+	}
+	.chart-point-list{
+		margin:0;
+		padding-left: 5px;
+			
+		li{
+			list-style:none;
+			font-size: 13px;
+			padding: 2px 0;
+			
+			i{
+				margin-right: 5px;
+				font-size: 11px;
+				position: relative;
+				top: -1px;
+			}
+		}
+	}
+}
+
+
+

public/style/scss/components/charts/_chart-flot.scss

@@ -0,0 +1,36 @@
+
+
+.flot-chart{
+    height: 15.7rem;
+}
+
+.tooltipflot {
+    background-color: transparent;
+    font-size: 1.4rem;
+    padding: .5rem 1rem;
+    color: rgba(255, 255, 255, 0.7);
+    border-radius: .2rem; }
+  
+  .legendColorBox > div {
+    border: 0 !important;
+    padding: 0 !important; }
+  
+  .legendLabel {
+    font-size: 0.825rem;
+    padding-left: .5rem; 
+    color: $white;
+  }
+    
+.flotTip {
+  background: $black;
+  border: 1px solid $black;
+  color: $white;
+}
+
+.legend > div{
+  background: transparent!important;
+}
+
+#balance_graph {
+  height: 260px;
+}

public/style/scss/components/charts/_chart-highcharts.scss

@@ -0,0 +1,11 @@
+.highcharts-root {
+    text {
+        font-weight: 300 !important;
+    }
+}
+
+
+.highcharts-credits {
+    display: none;
+}
+

public/style/scss/components/charts/_chart-morris.scss

@@ -0,0 +1,58 @@
+.morris-hover {
+	position: absolute;
+	z-index : 1;
+	background: $primary;
+	color: $white;
+}
+
+.morris-hover .morris-hover-point {
+	color: $white !important;
+	margin: 3px 0;
+	text-align: center;
+	padding: 0 25px;
+}
+
+.morris-hover .morris-hover-row-label {
+	background-color: $dark;
+	text-align: center;
+	padding: 5px;
+	margin-bottom: 5px;
+}
+
+.morris-hover.morris-default-style {
+	border-radius: 5px;
+	padding      : 0;
+	margin: 0;
+	border       : none;
+	overflow: hidden;
+}
+
+svg text {
+    font-weight: 600 !important;
+}
+
+
+#morris_donught, 
+#morris_donught_2, 
+#line_chart_2, 
+#morris_bar, 
+#morris_bar_stalked, 
+#morris_bar_2, 
+#morris_area_2, 
+#morris_area {
+    height: 240px !important;
+}
+
+#morris_line {
+	height: 278px !important;
+}
+
+
+#crypto-btc-card, 
+#crypto-eth-card, 
+#crypto-rpl-card, 
+#crypto-ltc-card {
+    height: 9.375rem;
+}
+
+

public/style/scss/components/charts/_chart-sparkline.scss

@@ -0,0 +1,25 @@
+#daily-sales, #comparison-rate, #usage-chart, #walet-status {
+    width: 100%;
+    display: block;
+
+    canvas {
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+}
+
+
+#sparkline-composite-chart, 
+#composite-bar, 
+#sparkline11, 
+#StackedBarChart, 
+#spark-bar, 
+#tristate {
+    canvas {
+        height: 100px !important;
+    }
+}
+
+#sparkline11 canvas {
+    width: 100px !important;
+}

public/style/scss/components/charts/_charts.scss

@@ -0,0 +1,10 @@
+@import "./chart-chartist";
+@import "./chart-chartjs";
+@import "./chart-c3";
+@import "./chart-flot";
+@import "./chart-morris";
+@import "./chart-sparkline";
+@import "./easy-pie-chart";
+@import "./chart-amchart";
+@import "./chart-highcharts";
+@import "./echarts";

public/style/scss/components/charts/_easy-pie-chart.scss

@@ -0,0 +1,23 @@
+.easy-pie-chart {
+    position: relative;
+    text-align: center;
+
+    .inner {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: inline-block;
+    }
+
+    img {
+        width: 75px;
+        height: 75px;
+        border-radius: 50%;
+    }
+
+    canvas {
+        display: block;
+        margin: 0 auto;
+    }
+}

public/style/scss/components/charts/_echarts.scss

@@ -0,0 +1,4 @@
+#chart_employee_gender, #chart_employee_status {
+    width: auto;
+    height: 350px;
+}