Tile Vue component

Compatible with vue3

Installation

required vue version 3.0+

npm install @cowlar/tile-ui

Usage

In main.js file

import { createApp } from "vue";
import Tile from '@cowlar/tile-ui';
import App from "./App.vue";

createApp(App)
  .use(Tile)
  .mount("#app");

In your Component

<Tile />

Props

| props | README | | ------ | ------ | | data (Object) | {title: "any title", value:123} | | unit (String) | "any unit" |

Piechart Component

import the Piechart componet e.g:

<PieChart :data=data :styles:styles ref="pie_graph"/>

To change the graph data values first set the graph_values atrtribute of data object then call the this.$refs.pie_refresh.get_graph() function

data:{
    width:  "80%",
    height:  "100%",
  graph_values:[{ name: "Value1", value: 10 },
        { name: "Value2", value: 20 },
        { name: "Value3", value: 70 }]
},
styles:{
    tooltip_font_size:  "16px",
    tooltip_line_height:  "20px",
    tooltip_padding:  "10px",
}

graph_values object attributes

| attribute | default values | valid values |description| |--|--|--|--| | width | 80% |in percentage|set the width of the graph including labels| |height | 100%|in percentage|set the height of the graph including labels| |pie_width |200| number|set the width of the graph only exculding labels | |pie_height |300|number|set the height of the graph only exculding labels | |theme_skin |true|true/false |dark and light theme | |arc_width |0.3|0 to 1|set the radius of inner circle| |color |["#01B8AA", "#FF6861", " #0C555E"]|any valid color code|set the color of arcs when light theme| |dark_theme_color |["#5B84B0", "#DCD427", " #FF3333"]|any valid color code|set the color of arcs when dark theme| |graph_values |[{ name: "Value1", value: 10 },{ name: "Value2", value: 20 },{ name: "Value3", value: 70 },]|graph value with lable name and number|set the graph values and label| |set_x_tooltip |0|number|set the the tooltip position along x-axis| |set_y_tooltip |-100|number|set the the tooltip position along y-axis|

styles object attributes Tooltip styling

| attribute | default values | valid values |description | |--|--|--|--| |tooltip_font_size | 16px | number | set the tooltip text font size | |tooltip_line_height | 20px | number | set the tooltip text line height | |tooltip_padding | 10px | number | set the tooltip box padding | |tooltip_background_color | white | any valid color code | set the tooltip box backgroung color | |tooltip_border_radius | 10px | number | set the border radius tooltip box | |tooltip_border | 2px solid #ced4da | | set the tooltip box border width, style and color | |tooltip_webkit_filter | drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3)) | | set the tooltip box shadow | |tooltip_filter | drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3)) | | set the tooltip box shadow| |tooltip_dark_theme_background_clr | #202020 | any valid color code | set the tooltip background when dark theme | |tooltip_dark_theme_webkit_filter | drop-shadow(0px 3px 3px rgba(207, 207, 207, 0.3)) | | set the tooltip box shadow when dark theme| |tooltip_dark_theme_filter | drop-shadow(0px 3px 3px rgba(243, 235, 235, 0.418)) | | set the tooltip box shadow when dark theme|