Added widget charts, chart extracted from widgets.

2018-10-11 12:34:59 +02:00
parent 2023248ee2
commit 364c951ef2
26 changed files with 785 additions and 130 deletions
@@ -0,0 +1,17 @@
+### Widget01
+
+This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
+
+Value is the procentage value of displayed progress-bar.
+
+prop | default
+--- | ---
+variant  | `''`
+value | `25`
+header| `'header:string'`
+text   | `'text:string'`
+footer    | `'footer:string'`
+
+#### Example:
+>        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+>                  variant="info" :value="30"/>
@@ -26,11 +26,11 @@ export default {
  props: {
    header: {
      type: String,
-      default: 'header|string'
+      default: 'header:string'
    },
    text: {
      type: String,
-      default: 'text|string'
+      default: 'text:string'
    },
    variant: {
      type: String,
@@ -38,7 +38,7 @@ export default {
    },
    footer: {
      type: String,
-      default: 'footer|string'
+      default: 'footer:string'
    },
    value: {
      type: Number,
@@ -0,0 +1,14 @@
+### Widget02
+This widget can be display with or without link. If you want to display link set showLink property to true.
+
+prop | default
+--- | ---
+iconClasses  | `'fa fa-cogs bg-primary'`
+showLink | `true`
+header| `'header:string'`
+text   | `'text:string'`
+link    | `'#'`
+
+#### Example:
+>     <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
+              :showLink="true" link="#"/>
@@ -21,11 +21,11 @@ export default {
    },
    header: {
      type: String,
-      default: 'header|string'
+      default: 'header:string'
    },
    text: {
      type: String,
-      default: 'text|string'
+      default: 'text:string'
    },
    showLink: {
      type: Boolean,
@@ -0,0 +1,11 @@
+### Widget03
+This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
+
+prop | default
+--- | ---
+iconClasses  | `'fa fa-cogs bg-primary'`
+header| `'header:string'`
+text   | `'text:string'`
+
+#### Example:
+>     <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
@@ -18,11 +18,11 @@ export default {
    },
    header: {
      type: String,
-      default: 'header|string'
+      default: 'header:string'
    },
    text: {
      type: String,
-      default: 'text|string'
+      default: 'text:string'
    },
  }
 }
@@ -0,0 +1,17 @@
+### Widget04
+This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is slot for placing data chart.
+
+prop | default
+--- | ---
+type  | `facebook`
+rightHeader   | `'rightHeader:string'`
+rightFooter   | `'rightFooter:string'`
+leftHeader   | `'leftHeader:string'`
+leftFooter   | `'leftFooter:string'`
+
+
+#### Example:
+>     <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
+>       <line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]'
+>                    label='Contracts' style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+>     </widget04>
@@ -1,9 +1,9 @@
 <template>
  <div class="brand-card">
-    <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+    <div :class="'bg-' + type" class="brand-card-header">
      <i  class="fa" :class="'fa-'+ type"></i>
      <div class="chart-wrapper">
-        <social-box-chart-example :data="dataPoints" />
+        <slot></slot>
      </div>
    </div>
    <div class="brand-card-body">
@@ -20,38 +20,28 @@
 </template>

 <script>
-import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
-
-
 export default {
  name: 'Widget04',
-  components: {
-    SocialBoxChartExample
-  },
  props: {
    type: {
      type: String,
      default: 'facebook'
    },
-    dataPoints: {
-      type: Array,
-      default: [65, 59, 84, 84, 51, 55, 40]
-    },
    rightHeader: {
      type: String,
-      default: 'rightHeader|string'
+      default: 'rightHeader:string'
    },
    rightFooter: {
      type: String,
-      default: 'rightFooter|string'
+      default: 'rightFooter:string'
    },
    leftHeader: {
      type: String,
-      default: 'leftHeader|string'
+      default: 'leftHeader:string'
    },
    leftFooter: {
      type: String,
-      default: 'leftFooter|string'
+      default: 'leftFooter:string'
    },
  }
 }
@@ -0,0 +1,15 @@
+### Widget05
+
+This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
+
+Value is the procentage value of displayed progress-bar.
+
+prop | default
+--- | ---
+variant  | `success`
+value | `30`
+iconClasses  |  `icon-people`
+header| `header:string`
+text   | `text:string`
+
+>     <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
@@ -32,11 +32,11 @@ export default {
    },
    header: {
      type: String,
-      default: 'header|string'
+      default: 'header:string'
    },
    text: {
      type: String,
-      default: 'text|string'
+      default: 'text:string'
    },
    variant: {
      type: String,
@@ -0,0 +1,21 @@
+### Widget06
+
+This widget can style is defined by cardClasses.
+
+prop | default
+--- | ---
+cardClasses  | `''`
+header| `header:string`
+text   | `text:string`
+
+>     <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
+      <b-dropdown class="float-right" variant="transparent p-0" right>
+        <template slot="button-content">
+          <i class="icon-settings"></i>
+        </template>
+        <b-dropdown-item>Action</b-dropdown-item>
+        <b-dropdown-item>Another action</b-dropdown-item>
+        <b-dropdown-item>Something else here...</b-dropdown-item>
+        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+      </b-dropdown>
+    </widget06>
@@ -1,30 +1,16 @@
 <template>
  <b-card no-body :class="cardClasses">
    <b-card-body class="pb-0">
-      <slot></slot>
+      <slot name='dropdown'></slot>
      <h4 class="mb-0">{{header}}</h4>
      <p>{{text}}</p>
    </b-card-body>
-    <card-line1-chart-example v-if="chartType == 'chart1'" chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
-    <card-line2-chart-example v-if="chartType == 'chart2'"chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
-    <card-line3-chart-example v-if="chartType == 'chart3'"chartId="card-chart-03" class="chart-wrapper" style="height:70px;" :height="chartHeight"/>
-    <card-bar-chart-example v-if="chartType == 'chart4'" chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
+    <slot name='chart'></slot>
  </b-card>
 </template>

 <script>
-import CardLine1ChartExample from './../dashboard/CardLine1ChartExample'
-import CardLine2ChartExample from './../dashboard/CardLine2ChartExample'
-import CardLine3ChartExample from './../dashboard/CardLine3ChartExample'
-import CardBarChartExample from './../dashboard/CardBarChartExample'
-
 export default {
-  components:{
-    CardLine1ChartExample,
-    CardLine2ChartExample,
-    CardLine3ChartExample,
-    CardBarChartExample
-  },
  name: 'Widget06',
  data () {
    return{
@@ -40,19 +26,11 @@ export default {
    },
    header: {
      type: String,
-      default: 'header|string'
+      default: 'header:string'
    },
    text: {
      type: String,
-      default: 'text|string'
-    },
-    chartType:{
-      type: String,
-      default: 'chart1'
-    },
-    chartHeight:{
-      type: Number,
-      default: 70
+      default: 'text:string'
    },
  }
 }
@@ -0,0 +1,47 @@
+<template>
+  <div class="card">
+    <div :class="cardClasses" class="card-header">
+      <div class="font-weight-bold">
+        <span>{{rightHeader}}</span>
+        <span class="float-right">{{leftHeader}}</span>
+      </div>
+      <div>
+        <span>
+          <small>{{rightFooter}}</small>
+        </span>
+        <span class="float-right">
+          <small>{{leftFooter}}</small>
+        </span>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Widget07',
+  props: {
+    cardClasses: {
+      type: String,
+      default: 'bg-primary'
+    },
+    rightHeader: {
+      type: String,
+      default: 'rightHeader:string'
+    },
+    rightFooter: {
+      type: String,
+      default: 'rightFooter:string'
+    },
+    leftHeader: {
+      type: String,
+      default: 'leftHeader:string'
+    },
+    leftFooter: {
+      type: String,
+      default: 'leftFooter:string'
+    },
+  }
+}
+</script>
@@ -0,0 +1,31 @@
+<template>
+  <div class="card">
+    <div class="card-body text-center">
+      <div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
+        <div class="h2 py-3">{{text}}</div>
+          <!-- <div class="chart-wrapper"> -->
+            <slot></slot>
+          <!-- </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Widget07',
+  props: {
+    cardClasses: {
+      type: String,
+      default: 'bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'header:string'
+    },
+    text: {
+      type: String,
+      default: 'text:string'
+    },
+  }
+}
+</script>