├── .gitignore ├── ApexchartsWidget.php ├── ApexchartsWidgetAsset.php ├── LICENSE ├── README.md ├── assets ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── dist │ └── build.js ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ └── main.js └── webpack.config.js ├── composer.json └── views └── index.php /.gitignore: -------------------------------------------------------------------------------- 1 | # Editor directories and files 2 | .idea 3 | *.suo 4 | *.ntvs* 5 | *.njsproj 6 | *.sln 7 | -------------------------------------------------------------------------------- /ApexchartsWidget.php: -------------------------------------------------------------------------------- 1 | 5 | * @package yii2-widget-apexcharts 6 | */ 7 | 8 | namespace onmotion\apexcharts; 9 | 10 | use yii\base\InvalidConfigException; 11 | use yii\base\Widget; 12 | use yii\db\ActiveRecord; 13 | use yii\helpers\ArrayHelper; 14 | use yii\helpers\Url; 15 | use yii\helpers\Json; 16 | 17 | /** 18 | * 19 | * @property ActiveRecord|null $model 20 | */ 21 | class ApexchartsWidget extends Widget 22 | { 23 | 24 | public $id = 'apexcharts-widget'; 25 | public $timeout = 500; 26 | public $chartOptions = []; 27 | public $series = []; 28 | public $type = 'line'; 29 | public $width = '100%'; 30 | public $height = 350; 31 | 32 | public function init() 33 | { 34 | \Yii::setAlias('@apexchartsWidgetRoot', __DIR__); 35 | 36 | parent::init(); 37 | } 38 | 39 | public function getViewPath() 40 | { 41 | return \Yii::getAlias('@apexchartsWidgetRoot/views'); 42 | } 43 | 44 | public function beforeRun() 45 | { 46 | return parent::beforeRun(); 47 | } 48 | 49 | 50 | public function run() 51 | { 52 | parent::run(); 53 | 54 | ApexchartsWidgetAsset::register($this->getView()); 55 | 56 | $id = json_encode($this->getId()); 57 | $chartOptions = Json::encode($this->chartOptions); 58 | $series = json_encode($this->series); 59 | $type = json_encode($this->type); 60 | $width = json_encode($this->width); 61 | $height = json_encode((string)$this->height); 62 | $timeout = $this->timeout; 63 | 64 | echo $this->render('index', compact('id', 'timeout', 'chartOptions', 'series', 'type', 'width', 'height')); 65 | } 66 | 67 | 68 | } 69 | -------------------------------------------------------------------------------- /ApexchartsWidgetAsset.php: -------------------------------------------------------------------------------- 1 | 5 | * @package yii2-widget-apexcharts 6 | */ 7 | 8 | namespace onmotion\apexcharts; 9 | 10 | class ApexchartsWidgetAsset extends \yii\web\AssetBundle 11 | { 12 | public function init() 13 | { 14 | $this->sourcePath = __DIR__ . '/assets/dist'; 15 | parent::init(); 16 | } 17 | 18 | public $publishOptions = [ 19 | 'forceCopy' => YII_ENV_DEV //dev 20 | ]; 21 | 22 | public $js = [ 23 | 'build.js', 24 | ]; 25 | 26 | public $depends = [ 27 | ]; 28 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Alexandr Kozhevnikov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Yii2 charts widget 2 | Yii2 charts widget - wrapper for the [ApexCharts.js](https://apexcharts.com). 3 | 4 | [![Latest Stable Version](https://poser.pugx.org/onmotion/yii2-widget-apexcharts/v/stable)](https://packagist.org/packages/onmotion/yii2-widget-apexcharts) 5 | [![Total Downloads](https://poser.pugx.org/onmotion/yii2-widget-apexcharts/downloads)](https://packagist.org/packages/onmotion/yii2-widget-apexcharts) 6 | [![Monthly Downloads](https://poser.pugx.org/onmotion/yii2-widget-apexcharts/d/monthly)](https://packagist.org/packages/onmotion/yii2-widget-apexcharts) 7 | [![License](https://poser.pugx.org/onmotion/yii2-widget-apexcharts/license)](https://packagist.org/packages/onmotion/yii2-widget-apexcharts) 8 | 9 | 10 | ![fluent](https://raw.githubusercontent.com/onmotion/yii2-widget-apexcharts/docs/docs/apexexample.gif) 11 | ![fluent](https://raw.githubusercontent.com/onmotion/yii2-widget-apexcharts/docs/docs/apexexample2.gif) 12 | 13 | For more examples see [ApexCharts.js demos](https://apexcharts.com/javascript-chart-demos/) 14 | 15 | Installation 16 | -- 17 | 18 | Just run: 19 | 20 | composer require onmotion/yii2-widget-apexcharts 21 | 22 | or add 23 | 24 | "onmotion/yii2-widget-apexcharts": "*" 25 | 26 | to the require section of your composer.json file. 27 | 28 | Usage 29 | -- 30 | 31 | Add `echo \onmotion\apexcharts\ApexchartsWidget::widget([])` 32 | with necessary options in the view file. 33 | 34 | Options 35 | -- 36 | | Option | type | default | description | 37 | | ---- | ---- | ---- | ---- | 38 | | **timeout** | int | `500` | Timeout before widget appearance | 39 | | **type** | string | `area` | Chart type. [More](https://apexcharts.com/docs/options/chart/type/) | 40 | | **width** | string | `100%` | Chart width | 41 | | **height** | string | `350` | Chart height | 42 | | **chartOptions** | array | | [detail](https://apexcharts.com/docs/options/) | 43 | | **series** | array | | [detail](https://apexcharts.com/docs/series/) | 44 | 45 | 46 | 47 | Examples 48 | -- 49 | ```php 50 | $series = [ 51 | [ 52 | 'name' => 'Entity 1', 53 | 'data' => [ 54 | ['2018-10-04', 4.66], 55 | ['2018-10-05', 5.0], 56 | ], 57 | ], 58 | [ 59 | 'name' => 'Entity 2', 60 | 'data' => [ 61 | ['2018-10-04', 3.88], 62 | ['2018-10-05', 3.77], 63 | ], 64 | ], 65 | [ 66 | 'name' => 'Entity 3', 67 | 'data' => [ 68 | ['2018-10-04', 4.40], 69 | ['2018-10-05', 5.0], 70 | ], 71 | ], 72 | [ 73 | 'name' => 'Entity 4', 74 | 'data' => [ 75 | ['2018-10-04', 4.5], 76 | ['2018-10-05', 4.18], 77 | ], 78 | ], 79 | ]; 80 | 81 | echo \onmotion\apexcharts\ApexchartsWidget::widget([ 82 | 'type' => 'bar', // default area 83 | 'height' => '400', // default 350 84 | 'width' => '500', // default 100% 85 | 'chartOptions' => [ 86 | 'chart' => [ 87 | 'toolbar' => [ 88 | 'show' => true, 89 | 'autoSelected' => 'zoom' 90 | ], 91 | ], 92 | 'xaxis' => [ 93 | 'type' => 'datetime', 94 | // 'categories' => $categories, 95 | ], 96 | 'plotOptions' => [ 97 | 'bar' => [ 98 | 'horizontal' => false, 99 | 'endingShape' => 'rounded' 100 | ], 101 | ], 102 | 'dataLabels' => [ 103 | 'enabled' => false 104 | ], 105 | 'stroke' => [ 106 | 'show' => true, 107 | 'colors' => ['transparent'] 108 | ], 109 | 'legend' => [ 110 | 'verticalAlign' => 'bottom', 111 | 'horizontalAlign' => 'left', 112 | ], 113 | ], 114 | 'series' => $series 115 | ]); 116 | ``` 117 | ![fluent](https://raw.githubusercontent.com/onmotion/yii2-widget-apexcharts/docs/docs/example.png) 118 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /assets/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /assets/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # photo_report 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "page_assessment", 3 | "description": "A Vue.js project", 4 | "version": "1.0.1", 5 | "author": "Alexandr Kozhevnikov ", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "webpack --mode development --open --hot", 10 | "build": "webpack --mode production --progress --watch" 11 | }, 12 | "dependencies": { 13 | "apexcharts": "^3.22.0", 14 | "npm": "^6.14.8", 15 | "vue": "^2.6.12", 16 | "vue-apexcharts": "^1.6.0" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not ie <= 8" 22 | ], 23 | "devDependencies": { 24 | "babel-core": "^6.26.0", 25 | "babel-loader": "^7.1.2", 26 | "babel-preset-env": "^1.6.0", 27 | "babel-preset-stage-3": "^6.24.1", 28 | "cross-env": "^5.2.1", 29 | "css-loader": "^2.1.1", 30 | "error-overlay-webpack-plugin": "^0.1.7", 31 | "file-loader": "^1.1.4", 32 | "lodash": "^4.17.20", 33 | "sass": "^1.58.0", 34 | "sass-loader": "^7.3.1", 35 | "style-loader": "^0.22.1", 36 | "uglifyjs-webpack-plugin": "^2.2.0", 37 | "vue-infinite-loading": "^2.4.5", 38 | "vue-loader": "^15.9.4", 39 | "vue-resource": "^1.5.1", 40 | "vue-template-compiler": "^2.6.12", 41 | "webpack": "^4.44.2", 42 | "webpack-cli": "^4.1.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /assets/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 42 | 43 | 46 | 47 | 50 | -------------------------------------------------------------------------------- /assets/src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @copyright Copyright (c) 2020 3 | * @author Alexandr Kozhevnikov 4 | * @package yii2-widget-apexcharts 5 | */ 6 | import Vue from 'vue' 7 | if (!window.Vue) { 8 | window.Vue = Vue; 9 | } 10 | import App from './App.vue' 11 | 12 | Vue.component('widget-apexcharts', App); 13 | 14 | -------------------------------------------------------------------------------- /assets/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 5 | 6 | 7 | 8 | module.exports = { 9 | entry: './src/main.js', 10 | output: { 11 | path: path.resolve(__dirname, './dist'), 12 | publicPath: '/dist/', 13 | filename: 'build.js' 14 | }, 15 | plugins: [ 16 | new VueLoaderPlugin() 17 | ], 18 | optimization: { 19 | // minimize: false // <---- disables uglify. 20 | minimizer: [ 21 | new UglifyJsPlugin({ 22 | sourceMap: false, 23 | uglifyOptions: { 24 | warnings: false 25 | }, 26 | parallel: true 27 | }) 28 | ] 29 | }, 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.css$/, 34 | loader: 'style-loader!css-loader' 35 | }, 36 | { 37 | test: /\.s[a|c]ss$/, 38 | loader: 'style-loader!css-loader!sass-loader' 39 | }, 40 | { 41 | test: /\.vue$/, 42 | loader: 'vue-loader', 43 | options: { 44 | loaders: {} 45 | // other vue-loader options go here 46 | } 47 | }, 48 | { 49 | test: /\.js$/, 50 | loader: 'babel-loader', 51 | exclude: /node_modules/ 52 | }, 53 | ] 54 | }, 55 | resolve: { 56 | alias: { 57 | 'vue$': 'vue/dist/vue.esm.js' 58 | }, 59 | extensions: ['*', '.js', '.vue', '.json'] 60 | }, 61 | devServer: { 62 | historyApiFallback: true, 63 | noInfo: true, 64 | overlay: true 65 | }, 66 | performance: { 67 | hints: false 68 | } 69 | } 70 | 71 | if (process.env.NODE_ENV === 'production') { 72 | module.exports.devtool = '#source-map' 73 | // http://vue-loader.vuejs.org/en/workflow/production.html 74 | module.exports.plugins = (module.exports.plugins || []).concat([ 75 | new webpack.DefinePlugin({ 76 | 'process.env': { 77 | NODE_ENV: '"production"' 78 | } 79 | }), 80 | 81 | ]) 82 | } 83 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "onmotion/yii2-widget-apexcharts", 3 | "description": "Yii2 charts widget - wrapper for the ApexCharts.js", 4 | "type": "yii2-extension", 5 | "keywords": [ 6 | "yii2", 7 | "extension", 8 | "widget", 9 | "chart", 10 | "charts", 11 | "apexcharts", 12 | "diagram" 13 | ], 14 | "license": "MIT", 15 | "authors": [ 16 | { 17 | "name": "Alexandr Kozhevnikov", 18 | "email": "onmotion1@gmail.com", 19 | "homepage": "http://kozhevnikov.site", 20 | "role": "Developer" 21 | } 22 | ], 23 | "require": { 24 | "php": ">=5.5.0", 25 | "yiisoft/yii2": ">=2.0.1" 26 | }, 27 | "autoload": { 28 | "psr-4": { 29 | "onmotion\\apexcharts\\": "" 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /views/index.php: -------------------------------------------------------------------------------- 1 | 5 | * @package yii2-widget-apexcharts 6 | */ 7 | 8 | /** @var $this \yii\web\View */ 9 | /** @var $id string */ 10 | /** @var $chartOptions string */ 11 | /** @var $series string */ 12 | /** @var $type string */ 13 | /** @var $width string */ 14 | /** @var $height string */ 15 | /** @var $timeout integer */ 16 | 17 | ?> 18 | 19 |
20 | 21 |
22 | 23 | registerJs(<<