npm package: @maryamnoor/uicomponents
Description: for all ui components
Latest version: 0.1.3

# Tile Vue component 
##### _Compatible with vue3_

## Installation

required vue version 3.0+

```sh
npm install @cowlar/tile-ui
```
## Usage
In main.js file

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

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

In your Component
```sh
<Tile />
```
## Props
| props | README |
| ------ | ------ |
| data (Object) | {title: "any title", value:123} |
| unit (String) | "any unit" |

## Piechart Component


import the Piechart componet <br />
**e.g**:
```sh
<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|