├── mcharts.pri ├── doc ├── img │ ├── QmlChartsExample.png │ ├── QmlChartsAverageTemp.png │ ├── QmlChartsAndroidExample.png │ ├── QmlChartsGoldPriceHistory.png │ ├── QmlChartsWindowsPieExample.png │ ├── QmlChartsWindowsPolarExample.png │ └── QmlChartsWindowsDoughnutExample.png └── branding │ ├── milo-doxy-footer.html │ ├── milo-doxy-header.html │ ├── milo.js │ ├── milo-doxygen.css │ └── milo-doxygen.scss ├── .gitmodules ├── AUTHORS.md ├── examples ├── live-update-example │ ├── qml.qrc │ ├── live-update-example.pro │ ├── main.qml │ ├── dataprovider.h │ ├── main.cpp │ └── dataprovider.cpp ├── showcase-example │ ├── qml.qrc │ ├── showcase-example.pro │ ├── dataprovider.h │ ├── main.cpp │ ├── dataprovider.cpp │ └── main.qml └── utils │ ├── qmlhelpers.h │ ├── tags.h │ ├── qmlhelpers.cpp │ └── helpers.h ├── CMakeLists.txt ├── mcharts.qrc ├── .gitignore ├── .gitlab-ci.yml ├── LICENSE-MiloCodeDB.txt ├── mcharts.doxyfile ├── README.md ├── MDataset.qml ├── MChart.qml └── MChartOptions.qml /mcharts.pri: -------------------------------------------------------------------------------- 1 | RESOURCES += $$PWD/mcharts.qrc 2 | -------------------------------------------------------------------------------- /doc/img/QmlChartsExample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsExample.png -------------------------------------------------------------------------------- /doc/img/QmlChartsAverageTemp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsAverageTemp.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "ChartJs2QML"] 2 | path = ChartJs2QML 3 | url = https://github.com/milosolutions/ChartJs2QML.git 4 | -------------------------------------------------------------------------------- /doc/img/QmlChartsAndroidExample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsAndroidExample.png -------------------------------------------------------------------------------- /AUTHORS.md: -------------------------------------------------------------------------------- 1 | Code has been written by Aleksey Lysenko and Jakub Motyczko, then refactored 2 | and upgraded by Tomasz Siekierda. 3 | -------------------------------------------------------------------------------- /doc/img/QmlChartsGoldPriceHistory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsGoldPriceHistory.png -------------------------------------------------------------------------------- /doc/img/QmlChartsWindowsPieExample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsWindowsPieExample.png -------------------------------------------------------------------------------- /doc/img/QmlChartsWindowsPolarExample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsWindowsPolarExample.png -------------------------------------------------------------------------------- /doc/img/QmlChartsWindowsDoughnutExample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/milosolutions/mcharts/HEAD/doc/img/QmlChartsWindowsDoughnutExample.png -------------------------------------------------------------------------------- /examples/live-update-example/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/showcase-example/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /CMakeLists.txt: -------------------------------------------------------------------------------- 1 | list(APPEND RESOURCES ${CMAKE_CURRENT_SOURCE_DIR}/mcharts.qrc) 2 | set(RESOURCES ${RESOURCES} PARENT_SCOPE) 3 | set(QML_IMPORT_PATH ${CMAKE_CURRENT_SOURCE_DIR} CACHE STRING "" FORCE PARENT_SCOPE) 4 | -------------------------------------------------------------------------------- /examples/utils/qmlhelpers.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | 5 | class QColor; 6 | 7 | class QmlHelpers : public QObject 8 | { 9 | Q_OBJECT 10 | 11 | public: 12 | explicit QmlHelpers(QObject *parent = nullptr); 13 | 14 | Q_INVOKABLE static QString htmlColor(const QColor &color); 15 | }; 16 | 17 | -------------------------------------------------------------------------------- /mcharts.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | MChart.qml 4 | ChartJs2QML/Chart.qml 5 | ChartJs2QML/Chart.js 6 | MDataset.qml 7 | MChartOptions.qml 8 | 9 | 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | debug 3 | release 4 | build-* 5 | *.log 6 | *.data 7 | *.user* 8 | *.pdb 9 | *.obj 10 | *.manifest 11 | *.res 12 | *.autosave 13 | *.Release 14 | *.Debug 15 | *~ 16 | cache 17 | ui_*.h 18 | Makefile* 19 | *.exe 20 | *.psd 21 | *.so-deployment-settings.json 22 | android-build/ 23 | app_process 24 | libc.so 25 | Thumbs.db 26 | .DS_Store 27 | *.kate-swp 28 | *.doxytag 29 | doc/html/ 30 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | build_docs: 2 | script: 3 | # run doxygen with the appropriate doxyfile 4 | - doxygen $CI_PROJECT_NAME.doxyfile 5 | 6 | # move generated documentation to qtdocs/milo-code-db/$CI_PROJECT_NAME 7 | - rm -rf /opt/online_docs/www/docs_open_source/milo-code-db/$CI_PROJECT_NAME/ 8 | - mv doc/html /opt/online_docs/www/docs_open_source/milo-code-db/$CI_PROJECT_NAME/ 9 | tags: 10 | - Docs 11 | -------------------------------------------------------------------------------- /examples/showcase-example/showcase-example.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT = core gui qml quick 4 | CONFIG += c++17 5 | 6 | # include MiloCharts 7 | include(../../mcharts.pri) 8 | 9 | SOURCES += main.cpp \ 10 | dataprovider.cpp \ 11 | ../utils/qmlhelpers.cpp 12 | 13 | RESOURCES += qml.qrc 14 | 15 | INCLUDEPATH = ../ 16 | 17 | HEADERS += \ 18 | dataprovider.h \ 19 | ../utils/helpers.h \ 20 | ../utils/qmlhelpers.h 21 | -------------------------------------------------------------------------------- /examples/live-update-example/live-update-example.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT = core gui qml quick 4 | CONFIG += c++17 5 | 6 | # include MiloCharts 7 | include(../../mcharts.pri) 8 | 9 | SOURCES += main.cpp \ 10 | dataprovider.cpp \ 11 | ../utils/qmlhelpers.cpp 12 | 13 | RESOURCES += qml.qrc 14 | 15 | INCLUDEPATH = ../ 16 | 17 | HEADERS += \ 18 | dataprovider.h \ 19 | ../utils/helpers.h \ 20 | ../utils/qmlhelpers.h 21 | -------------------------------------------------------------------------------- /examples/utils/tags.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | /*! 4 | * defgroup GUI Gui code 5 | * 6 | * Static strings used in application. When defined in a file like this one, 7 | * we can be sure there will be no typos, because compiler will throw an error 8 | * if you mistype `Tags::coreGroup`, for example. It is also easier to 9 | * refactor, rename tags than searching for all occurences of a string in 10 | * multiple files. 11 | */ 12 | namespace Tags { 13 | //const char *foo = "foo"; 14 | //const QByteArray bar = "bar"; 15 | } 16 | -------------------------------------------------------------------------------- /examples/utils/qmlhelpers.cpp: -------------------------------------------------------------------------------- 1 | #include "qmlhelpers.h" 2 | 3 | #include 4 | #include 5 | 6 | QmlHelpers::QmlHelpers(QObject *parent) : QObject(parent) 7 | { 8 | } 9 | 10 | QString QmlHelpers::htmlColor(const QColor &color) 11 | { 12 | if (color.alpha() == 255) { 13 | return color.name(); 14 | } 15 | 16 | // name() returns color without alpha channel, so if it's other than 17 | // opaque, we need to inject the alpha value into the name. 18 | //const QString name = color.name() + QByteArray::number(color.alpha(), 16); 19 | QString name = color.name(); 20 | name.insert(1, QByteArray::number(color.alpha(), 16)); 21 | return name; 22 | } 23 | -------------------------------------------------------------------------------- /doc/branding/milo-doxy-footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | 14 |
15 | $generatedby   16 | doxygen 17 | $doxygenversion 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /LICENSE-MiloCodeDB.txt: -------------------------------------------------------------------------------- 1 | Milo Code Database license 2 | Version 1, August 2016 3 | 4 | Copyright (C) 2017 Milo Solutions 5 | Contact: https://www.milosolutions.com 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. -------------------------------------------------------------------------------- /examples/utils/helpers.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | /*! 4 | * \ingroup GUI 5 | * 6 | * Makes sure `condition` is true, otherwise crashes the application. 7 | * 8 | * This is useful when using connect(), QMetaObject::invokeMethod() and other 9 | * similar pieces of code which should ALWAYS return true, but if developer 10 | * makes a mistake they only print warnings which are easy to miss. 11 | * 12 | \verbatim 13 | CHECK(connect(object, &Class::someSignal, 14 | receiver, &OtherClass:someSlot, 15 | Qt::QueuedConnection)); 16 | 17 | CHECK(QMetaObject::invokeMethod( 18 | object, "functionName", 19 | Qt::QueuedConnection, 20 | Q_ARG(QVector, something)); 21 | \endverbatim 22 | * 23 | */ 24 | #if !defined(CHECK) 25 | #if defined(DEBUG_BUILD) 26 | #define CHECK(condition) if (!condition) qFatal("Check failed!") 27 | #else 28 | #define CHECK(condition) condition 29 | #endif 30 | #endif 31 | 32 | /*! 33 | * \ingroup GUI 34 | * 35 | * General helper functions, not related to GUI. 36 | */ 37 | class Helpers 38 | { 39 | public: 40 | /*! 41 | * Returns true if \a index is a valid index in \a container. To be valid, 42 | * the index must be equal to 0 or larger, and smaller than \a container 43 | * size. 44 | */ 45 | template 46 | static bool isValidIndex(const int index, const Container &container) 47 | { 48 | return index >= 0 && index < int(container.size()); 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /mcharts.doxyfile: -------------------------------------------------------------------------------- 1 | ## Milo Solutions - doxygen conf for MiloCharts 2 | # 3 | # 4 | ## (c) Milo Solutions, 2017 5 | 6 | DOXYFILE_ENCODING = UTF-8 7 | 8 | PROJECT_NAME = MCharts 9 | PROJECT_NUMBER = 1.0 10 | PROJECT_BRIEF = "MCharts implements some simple yet meaningful and eye friendly charts to display data in Milo projects" 11 | 12 | OUTPUT_DIRECTORY = doc/ 13 | 14 | INPUT = AUTHORS.md README.md example/ 15 | #EXCLUDE_PATTERNS = */something/* 16 | USE_MDFILE_AS_MAINPAGE = README.md 17 | MARKDOWN_SUPPORT = YES 18 | TOC_INCLUDE_HEADINGS = 99 19 | 20 | RECURSIVE = TRUE 21 | QT_AUTOBRIEF = YES 22 | 23 | EXTRACT_ALL = YES 24 | EXTRACT_PRIVATE = YES 25 | EXTRACT_STATIC = YES 26 | 27 | DISTRIBUTE_GROUP_DOC = YES 28 | 29 | GENERATE_TAGFILE = mcharts.doxytag 30 | GENERATE_HTML = YES 31 | GENERATE_LATEX = NO 32 | GENERATE_RTF = NO 33 | GENERATE_MAN = NO 34 | GENERATE_XML = NO 35 | 36 | HTML_OUTPUT = html/ 37 | HTML_FILE_EXTENSION = .html 38 | HTML_HEADER = doc/branding/milo-doxy-header.html 39 | HTML_FOOTER = doc/branding/milo-doxy-footer.html 40 | HTML_EXTRA_STYLESHEET= doc/branding/milo-doxygen.css 41 | HTML_EXTRA_FILES = doc/branding/milo.js doc/img/QmlChartsAndroidExample.png doc/img/QmlChartsAverageTemp.png doc/img/QmlChartsExample.png doc/img/QmlChartsGoldPriceHistory.png doc/img/QmlChartsWindowsDoughnutExample.png doc/img/QmlChartsWindowsPieExample.png doc/img/QmlChartsWindowsPolarExample.png 42 | 43 | IMAGE_PATH = doc/img 44 | 45 | TAB_SIZE = 4 46 | INHERIT_DOCS = YES 47 | BUILTIN_STL_SUPPORT = YES 48 | GENERATE_TODOLIST = YES 49 | 50 | ALLEXTERNALS = YES 51 | EXTERNAL_GROUPS = YES 52 | EXTERNAL_PAGES = YES 53 | 54 | HAVE_DOT = NO 55 | 56 | TAGFILES = ../../../../../mcdb-installer.doxytag=../../../../../doc/html 57 | 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | MCharts 2 | === 3 | 4 | [Online documentation](https://docs.milosolutions.com/milo-code-db/mcharts) 5 | 6 | [Source code](https://github.com/milosolutions/mcharts) 7 | 8 | ![MCharts on Android](doc/img/QmlChartsAndroidExample.png "MCharts at work") 9 | 10 | # Getting Started 11 | 12 | MChart implements some simple yet meaningful and eye friendly charts to display data. It's based on [ChartJs2QML](https://github.com/MichaelVoelkel/ChartJs2QML.git): QML Bindings for Chart.js. 13 | 14 | # How to use 15 | 16 | 1. Clone this repository. 17 | 2. Run `git submodule update --init --recursive` to check out and initialize 18 | ChartJs2QML subproject. 19 | 3. Add `mcharts.pri` into your `qmake` project or use `add_subdirectory` to add 20 | `MCharts` to your `CMake` project. 21 | 4. Prepare a class that will provide data for MChart. For more information you 22 | can look at provided examples. 23 | 5. Compile and enjoy. 24 | 25 | For example usage, see the examples. This project is fully documented - please 26 | check doxygen docs or see the comments directly in the source file(s). 27 | 28 | # License 29 | 30 | This project is licensed under the MIT license - see the LICENSE-MiloCodeDB.txt file for details. The giants on whose shoulders it is based - ChartJs2QML 31 | and Chart.js are both available under MIT license as well. 32 | 33 | # Gallery 34 | 35 | Here are some examples showing barcode scanner: 36 | 37 | Charts running on Ubuntu desktop 38 | Charts running on Ubuntu desktop 39 | 40 | 41 | Doughnut chart on Windows 42 | Doughnut chart on Windows 43 | 44 | 45 | Pie chart on Windows 46 | Pie chart on Windows 47 | 48 | 49 | Polar chart on Windows 50 | Polar chart on Windows 51 | -------------------------------------------------------------------------------- /examples/showcase-example/dataprovider.h: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | 25 | #ifndef DATAPROVIDER_H 26 | #define DATAPROVIDER_H 27 | 28 | #include 29 | 30 | #include 31 | 32 | class DataProvider : public QObject 33 | { 34 | Q_OBJECT 35 | 36 | public: 37 | explicit DataProvider(QObject *parent = nullptr); 38 | 39 | Q_INVOKABLE QList getValues() const; 40 | Q_INVOKABLE QList getValues2() const; 41 | Q_INVOKABLE QJsonArray getPointValues() const; 42 | Q_INVOKABLE QJsonArray getPointValues2() const; 43 | Q_INVOKABLE QJsonArray getBubbleValues() const; 44 | Q_INVOKABLE QJsonArray getBubbleValues2() const; 45 | Q_INVOKABLE QStringList getLabels() const; 46 | Q_INVOKABLE QStringList getColors() const; 47 | Q_INVOKABLE QStringList getColors2() const; 48 | }; 49 | 50 | #endif // DATAPROVIDER_H 51 | -------------------------------------------------------------------------------- /doc/branding/milo-doxy-header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | $projectname: $title 9 | $title 10 | 11 | 12 | 13 | 14 | $treeview 15 | $search 16 | $mathjax 17 | 18 | $extrastylesheet 19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
33 |
$projectname 34 |  $projectnumber 35 |
36 |
$projectbrief
37 | 		42 |
$projectbrief
43 | 		$searchbox
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /examples/live-update-example/main.qml: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | import QtQuick 2.15 25 | import QtQuick.Window 2.2 26 | import QtQuick.Layouts 1.3 27 | 28 | import "mcharts" 29 | 30 | Window { 31 | visible: true 32 | width: 1000 33 | height: 800 34 | 35 | MChart { 36 | id: chart 37 | 38 | anchors.fill: parent 39 | 40 | type: MChart.Type.Line 41 | labels: dataProvider.labels 42 | silent: true 43 | 44 | data: [ 45 | MDataset { 46 | name: "Live update set" 47 | values: dataProvider.values 48 | fillColor: dataProvider.getColors()[0] 49 | lineColor: dataProvider.getColors()[1] 50 | pointColor: dataProvider.getColors()[2] 51 | }, 52 | 53 | MDataset { 54 | name: "Set 2" 55 | values: [1.1, 2, 0.75, 3, 4] 56 | fillColor: dataProvider.getColors()[5] 57 | lineColor: dataProvider.getColors()[4] 58 | pointColor: dataProvider.getColors()[3] 59 | } 60 | ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /doc/branding/milo.js: -------------------------------------------------------------------------------- 1 | 2 | // HTMLElement.prototype.wrap = function(wrapper){ 3 | 4 | // this.parentNode.insertBefore(wrapper, this); 5 | // wrapper.appendChild(this); 6 | // } 7 | 8 | 9 | // document.getElementsByClassName("current")[0].appendChild( 10 | // document.getElementsByClassName("tablist")[1] 11 | // ); 12 | 13 | // document.getElementsByClassName('tablist')[1].classList.add('custom-submenu'); 14 | 15 | // document.getElementsByClassName('tablist')[1].classList.remove('tablist'); 16 | 17 | 18 | 19 | 20 | // var x = document.getElementsByClassName("contents"); 21 | 22 | // if(x[0].children[0].className != 'toc') { 23 | // x[0].classList.add('custom-contents'); 24 | // } 25 | 26 | // if(x[0].children[1].nodeName == 'UL') { 27 | // x[0].classList.remove('custom-contents'); 28 | 29 | // var ul = x[0].children[1]; 30 | 31 | // var dv = document.createElement('div'); 32 | // dv.classList.add('toc'); 33 | 34 | // ul.wrap(dv); 35 | // } 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | $( document ).ready(function() { 45 | 46 | HTMLElement.prototype.wrap = function(wrapper) { 47 | this.parentNode.insertBefore(wrapper, this); 48 | wrapper.appendChild(this); 49 | } 50 | 51 | 52 | 53 | $('.current')[0].appendChild($('.tablist')[1]); 54 | 55 | $('.tablist')[1].classList.add('.custom-submenu'); 56 | 57 | $('.tablist')[1].classList.remove('.tablist'); 58 | 59 | 60 | 61 | var x = $('.contents'); 62 | 63 | if(x[0].children[0].className != 'toc') { 64 | x[0].classList.add('custom-contents'); 65 | } 66 | 67 | if(x[0].children[1].nodeName == 'UL') { 68 | x[0].classList.remove('custom-contents'); 69 | 70 | var ul = x[0].children[1]; 71 | 72 | var dv = document.createElement('div'); 73 | dv.classList.add('toc'); 74 | 75 | ul.wrap(dv); 76 | } 77 | 78 | 79 | 80 | if(!$('.toc').length){ 81 | $('.textblock').css('width', '100%'); 82 | $('.directory').css('width', '100%'); 83 | } 84 | 85 | $('.tablist li').css({width: "auto", display: "inline-block", clear: "none"}); 86 | $('.tablist').css({backgroundColor: "#444", width: "100%"}); 87 | $('.directory').css('margin', '0'); 88 | 89 | }); -------------------------------------------------------------------------------- /examples/live-update-example/dataprovider.h: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | #ifndef DATAPROVIDER_H 25 | #define DATAPROVIDER_H 26 | 27 | #include 28 | #include 29 | #include 30 | 31 | class DataProvider : public QObject 32 | { 33 | Q_OBJECT 34 | 35 | Q_PROPERTY(QList values READ values NOTIFY countChanged) 36 | Q_PROPERTY(QList labels READ labels NOTIFY countChanged) 37 | 38 | public: 39 | explicit DataProvider(QObject *parent = nullptr); 40 | 41 | Q_INVOKABLE QStringList getColors() const; 42 | 43 | QList values() const; 44 | QList labels() const; 45 | 46 | signals: 47 | void valuesChanged(const QList &values) const; 48 | void labelsChanged(const QList &labels) const; 49 | void countChanged() const; 50 | 51 | private slots: 52 | void addValue(); 53 | 54 | private: 55 | void updateLabels(); 56 | 57 | QList m_values;// = { 1.5, 2.2, 1.1, 2.7, 2.1, 1.0, 0.5, 2.5, 1.5, 58 | // 2.5, 0.5, 2.3, 0.8, 1.5 }; 59 | QList m_labels; 60 | QTimer m_timer; 61 | }; 62 | 63 | #endif // DATAPROVIDER_H 64 | -------------------------------------------------------------------------------- /examples/showcase-example/main.cpp: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | #include 25 | #include 26 | #include 27 | 28 | #include "dataprovider.h" 29 | 30 | #include "utils/helpers.h" 31 | #include "utils/qmlhelpers.h" 32 | 33 | /*! 34 | Main routine. Remember to update the application name and initialise logger 35 | class, if present. 36 | */ 37 | int main(int argc, char *argv[]) { 38 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 39 | 40 | QGuiApplication app(argc, argv); 41 | app.setApplicationName("charts-showcase-example"); 42 | 43 | QQmlApplicationEngine engine; 44 | 45 | auto qmlHelpers = new QmlHelpers(&engine); 46 | engine.rootContext()->setContextProperty("qmlHelpers", qmlHelpers); 47 | 48 | auto dataProvider = new DataProvider(&engine); 49 | engine.rootContext()->setContextProperty("dataProvider", dataProvider); 50 | 51 | engine.addImportPath("qrc:/mcharts"); 52 | 53 | const QUrl url(QStringLiteral("qrc:/main.qml")); 54 | CHECK(QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, 55 | &app, [url](QObject *obj, const QUrl &objUrl) { 56 | if (!obj && url == objUrl) 57 | QCoreApplication::exit(-1); 58 | }, Qt::QueuedConnection)); 59 | engine.load(url); 60 | 61 | return app.exec(); 62 | } 63 | -------------------------------------------------------------------------------- /examples/live-update-example/main.cpp: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | #include 25 | #include 26 | #include 27 | 28 | #include "dataprovider.h" 29 | 30 | #include "utils/helpers.h" 31 | #include "utils/qmlhelpers.h" 32 | 33 | /*! 34 | Main routine. Remember to update the application name and initialise logger 35 | class, if present. 36 | */ 37 | int main(int argc, char *argv[]) { 38 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 39 | 40 | QGuiApplication app(argc, argv); 41 | app.setApplicationName("charts-live-update-example"); 42 | 43 | QQmlApplicationEngine engine; 44 | 45 | auto qmlHelpers = new QmlHelpers(&engine); 46 | engine.rootContext()->setContextProperty("qmlHelpers", qmlHelpers); 47 | 48 | auto dataProvider = new DataProvider(&engine); 49 | engine.rootContext()->setContextProperty("dataProvider", dataProvider); 50 | 51 | engine.addImportPath("qrc:/mcharts"); 52 | 53 | const QUrl url(QStringLiteral("qrc:/main.qml")); 54 | CHECK(QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, 55 | &app, [url](QObject *obj, const QUrl &objUrl) { 56 | if (!obj && url == objUrl) 57 | QCoreApplication::exit(-1); 58 | }, Qt::QueuedConnection)); 59 | engine.load(url); 60 | 61 | return app.exec(); 62 | } 63 | -------------------------------------------------------------------------------- /examples/live-update-example/dataprovider.cpp: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | #include "dataprovider.h" 25 | #include "utils/helpers.h" 26 | 27 | #include 28 | #include 29 | 30 | /*! 31 | * \brief Class provides test data set for MiloCharts Demo project. 32 | * \class DataProvider 33 | */ 34 | 35 | DataProvider::DataProvider(QObject *parent) : 36 | QObject(parent) 37 | { 38 | updateLabels(); 39 | 40 | CHECK(connect(&m_timer, &QTimer::timeout, 41 | this, &DataProvider::addValue)); 42 | 43 | m_timer.setSingleShot(false); 44 | m_timer.setInterval(1000); 45 | m_timer.start(); 46 | } 47 | 48 | /*! 49 | * \brief DataProvider::getColors - returns chart colors. 50 | * \return 51 | */ 52 | QStringList DataProvider::getColors() const 53 | { 54 | return { 55 | "#aa54bc9b", 56 | "#aaf58d35", 57 | "#aaf14946", 58 | "#aa8562a4", 59 | "#aa348faa", 60 | "#aadddddd", 61 | "#aac451e2" 62 | }; 63 | } 64 | 65 | QList DataProvider::values() const 66 | { 67 | return m_values; 68 | } 69 | 70 | QList DataProvider::labels() const 71 | { 72 | return m_labels; 73 | } 74 | 75 | void DataProvider::addValue() 76 | { 77 | m_values.append(qreal(QRandomGenerator::global()->bounded(5.0))); 78 | updateLabels(); 79 | emit valuesChanged(m_values); 80 | //qDebug() << "Update!" << m_values.size() << m_labels.size(); 81 | emit countChanged(); 82 | } 83 | 84 | void DataProvider::updateLabels() 85 | { 86 | bool changed = false; 87 | while (m_values.size() != m_labels.size()) { 88 | m_labels.append(m_labels.size() + 1); 89 | changed = true; 90 | } 91 | 92 | if (changed) { 93 | emit labelsChanged(m_labels); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /MDataset.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | 3 | QtObject { 4 | /*! 5 | * To get a Mixed chart, specify type here. Otherwise, leave it to be 6 | * Invalid, and MChart.type will be used instead. 7 | */ 8 | property int type: MChart.Type.Invalid 9 | 10 | /*! 11 | * Name of the dataset. This text will be shown in chart's legend. 12 | */ 13 | property string name 14 | 15 | /*! 16 | * List of values to display. The number of values should match MChart's 17 | * number of labels. 18 | */ 19 | property var values 20 | 21 | /*! 22 | * Color used to fill all values in this dataset. If you need to color each 23 | * value separately, use fillColors property instead. 24 | */ 25 | property color fillColor 26 | 27 | /*! 28 | * Color used to paint all lines in this dataset. If you need to color each 29 | * line separately, use lineColors property instead. 30 | */ 31 | property color lineColor 32 | 33 | /*! 34 | * Color used to paint all points in this dataset. If you need to color each 35 | * point separately, use pointColors property instead. 36 | */ 37 | property color pointColor 38 | 39 | /*! 40 | * Colors used to fill values in this dataset. Each value is painted with 41 | * next color from the list. If you need to color each value with the same 42 | * color, use fillColor property instead. 43 | */ 44 | property var fillColors 45 | 46 | /*! 47 | * Colors used to paint lines in this dataset. Each line is painted with 48 | * next color from the list. If you need to color each line with the same 49 | * color, use lineColor property instead. 50 | */ 51 | property var lineColors 52 | 53 | /*! 54 | * Colors used to paint points in this dataset. Each point is painted with 55 | * next color from the list. If you need to color each value with the same 56 | * color, use pointColor property instead. 57 | */ 58 | property var pointColors 59 | 60 | /*! 61 | * Suggested minimal value to display on chart's scale. MChart can override 62 | * this based on other datasets. 63 | */ 64 | property real suggestedMin: 0 65 | 66 | /*! 67 | * Suggested maximum value to display on chart's scale. MChart can override 68 | * this based on other datasets. 69 | */ 70 | property real suggestedMax: 1 71 | 72 | /*! 73 | * Emitted whenever any property in MDataset gets modified. 74 | */ 75 | signal updated() 76 | 77 | /*! 78 | * Returns either a single HTML color or a list of them, depending on which 79 | * is set. 80 | */ 81 | function getColor(single, list) { 82 | if (list !== undefined && list.length > 0) { 83 | let htmlColors = [] 84 | for (let i = 0 ; i < list.length ; ++i) { 85 | htmlColors.push(qmlHelpers.htmlColor(list[i])) 86 | } 87 | 88 | return htmlColors 89 | } else { 90 | return qmlHelpers.htmlColor(single) 91 | } 92 | } 93 | 94 | /*! 95 | * Returns single fill color or a list, depending on which value is set. 96 | */ 97 | function getFillColor() { 98 | return getColor(fillColor, fillColors) 99 | } 100 | 101 | /*! 102 | * Returns single line color or a list, depending on which value is set. 103 | */ 104 | function getLineColor() { 105 | return getColor(lineColor, lineColors) 106 | } 107 | 108 | /*! 109 | * Returns single point color or a list, depending on which value is set. 110 | */ 111 | function getPointColor() { 112 | return getColor(pointColor, pointColors) 113 | } 114 | 115 | onValuesChanged: { 116 | if (values === undefined) { 117 | suggestedMax = 1 118 | suggestedMin = 0 119 | return; 120 | } 121 | 122 | let min = 0 123 | let max = 0 124 | for (let i = 0; i < values.length; ++i) { 125 | let current = values[i] 126 | 127 | if (typeof current === "object") { 128 | min = Math.min(min, current.x) 129 | max = Math.max(max, current.x) 130 | min = Math.min(min, current.y) 131 | max = Math.max(max, current.y) 132 | } else { 133 | min = Math.min(min, current) 134 | max = Math.max(max, current) 135 | } 136 | } 137 | 138 | suggestedMin = min 139 | suggestedMax = max 140 | 141 | updated() 142 | } 143 | 144 | onTypeChanged: updated() 145 | onNameChanged: updated() 146 | onFillColorChanged: updated() 147 | onLineColorChanged: updated() 148 | onPointColorChanged: updated() 149 | onFillColorsChanged: updated() 150 | onLineColorsChanged: updated() 151 | onPointColorsChanged: updated() 152 | onSuggestedMinChanged: updated() 153 | onSuggestedMaxChanged: updated() 154 | } 155 | -------------------------------------------------------------------------------- /examples/showcase-example/dataprovider.cpp: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | 25 | #include "dataprovider.h" 26 | #include 27 | 28 | /*! 29 | * \brief Class provides test data set for MiloCharts Demo project. 30 | * \class DataProvider 31 | */ 32 | 33 | DataProvider::DataProvider(QObject *parent) : 34 | QObject(parent) 35 | { 36 | } 37 | 38 | /*! 39 | * \brief DataProvider::getValues - returns chart values. 40 | * \return 41 | */ 42 | QList DataProvider::getValues() const 43 | { 44 | return { 1.5, 2.2, 1.1, 2.7, 2.1, 1.0, 0.5 }; 45 | } 46 | 47 | QList DataProvider::getValues2() const 48 | { 49 | return { 2.5, 1.5, 2.5, 0.5, 2.3, 0.8, 1.5 }; 50 | } 51 | 52 | QJsonArray DataProvider::getPointValues() const 53 | { 54 | QJsonArray result; 55 | 56 | const auto xValues = getValues(); 57 | const auto yValues = getValues2(); 58 | 59 | for (int i = 0; i < xValues.size(); ++i) { 60 | QJsonObject object; 61 | object.insert("x", xValues.at(i)); 62 | object.insert("y", yValues.at(i)); 63 | result.append(object); 64 | } 65 | 66 | return result; 67 | } 68 | 69 | QJsonArray DataProvider::getPointValues2() const 70 | { 71 | QJsonArray result; 72 | 73 | const auto xValues = getValues2(); 74 | const auto yValues = getValues(); 75 | 76 | for (int i = 0; i < xValues.size(); ++i) { 77 | QJsonObject object; 78 | object.insert("x", xValues.at(i)); 79 | object.insert("y", yValues.at(i)); 80 | result.append(object); 81 | } 82 | 83 | return result; 84 | } 85 | 86 | QJsonArray DataProvider::getBubbleValues() const 87 | { 88 | QJsonArray result; 89 | 90 | const auto xValues = getValues(); 91 | const auto yValues = getValues2(); 92 | 93 | for (int i = 0; i < xValues.size(); ++i) { 94 | QJsonObject object; 95 | object.insert("x", xValues.at(i)); 96 | object.insert("y", yValues.at(i)); 97 | object.insert("r", 5.0 / (i + 1)); 98 | result.append(object); 99 | } 100 | 101 | return result; 102 | } 103 | 104 | QJsonArray DataProvider::getBubbleValues2() const 105 | { 106 | QJsonArray result; 107 | 108 | const auto xValues = getValues2(); 109 | const auto yValues = getValues(); 110 | 111 | for (int i = 0; i < xValues.size(); ++i) { 112 | QJsonObject object; 113 | object.insert("x", xValues.at(i)); 114 | object.insert("y", yValues.at(i)); 115 | object.insert("r", 10.0 / (i + 1)); 116 | result.append(object); 117 | } 118 | 119 | return result; 120 | } 121 | 122 | /*! 123 | * \brief DataProvider::getLabels - returns chart labels. 124 | * \return 125 | */ 126 | QStringList DataProvider::getLabels() const 127 | { 128 | return { "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00" }; 129 | } 130 | 131 | /*! 132 | * \brief DataProvider::getColors - returns chart colors. 133 | * \return 134 | */ 135 | QStringList DataProvider::getColors() const 136 | { 137 | return { "#aa54bc9b", 138 | "#aaf58d35", 139 | "#aaf14946", 140 | "#aa8562a4", 141 | "#aa348faa", 142 | "#aadddddd", 143 | "#aac451e2" 144 | }; 145 | } 146 | 147 | QStringList DataProvider::getColors2() const 148 | { 149 | QStringList colors = getColors(); 150 | std::reverse(colors.begin(), colors.end()); 151 | return colors; 152 | } 153 | -------------------------------------------------------------------------------- /MChart.qml: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | 25 | import QtQuick 2.15 26 | 27 | //import "mcharts" 28 | 29 | /*! 30 | * MChart is a wrapper for Chart element, providing more useful and convenient 31 | * API. 32 | * 33 | * Each chart needs to have: 34 | * \li `type` 35 | * \li `labels` 36 | * \li one MDataset with `values` 37 | * 38 | * MChart adds some basic error reporting (`Chart.js` comes with **NO ERROR** 39 | * **HANDLING** - most errors are SILENTLY ignored!), to turn it off set 40 | * `silent` property to `true`. 41 | * 42 | * `Chart.js` requires the number of labels and values to be matching! 43 | * 44 | * Example static chart: 45 | \verbatim 46 | MChart { 47 | id: chart 48 | 49 | anchors.fill: parent 50 | 51 | type: MChart.Type.Bar 52 | labels: [1, 2, 3, 4, 5] 53 | 54 | data: [ 55 | // Each bar in different color 56 | MDataset { 57 | name: "Set of values" 58 | values: [1, 2, 2.1, 0.1, 0.7] 59 | fillColor: "#ff0000" 60 | lineColor: "#00ff00" 61 | pointColor: "#0000ff" 62 | } 63 | ] 64 | } 65 | \endverbatim 66 | */ 67 | Chart { 68 | id: root 69 | 70 | /*! 71 | * Chart type. Detailed documentation of each of them can be found here: 72 | * https://www.chartjs.org/docs/latest/charts/ 73 | * 74 | * \warning Area charts are not supported. Also, for Mixed type - see usage 75 | * in showcase-example. The trick is to use multiple chart types instead of 76 | * selecting `Mixed` type. 77 | */ 78 | enum Type { 79 | Invalid, 80 | Bar, 81 | Pie, 82 | Line, 83 | Radar, 84 | Doughnut, 85 | PolarArea, 86 | Bubble, 87 | Scatter, 88 | Area, 89 | Mixed 90 | } 91 | 92 | /*! 93 | * Helper method which translates Type enum into string understood by 94 | * Chart.js backend. 95 | */ 96 | function typeToString(type) { 97 | switch (type) { 98 | case MChart.Type.Bar: 99 | return 'bar' 100 | case MChart.Type.Pie: 101 | return 'pie' 102 | case MChart.Type.Line: 103 | return 'line' 104 | case MChart.Type.Radar: 105 | return 'radar' 106 | case MChart.Type.Doughnut: 107 | return 'doughnut' 108 | case MChart.Type.PolarArea: 109 | return 'polarArea' 110 | case MChart.Type.Bubble: 111 | return 'bubble' 112 | case MChart.Type.Scatter: 113 | return 'scatter' 114 | case MChart.Type.Area: 115 | console.log("Area charts are not supported") 116 | return 'area' 117 | case MChart.Type.Mixed: 118 | console.log("Mixed should be specified elsewhere, see examples") 119 | return 'mixed' 120 | case MChart.Type.Invalid: 121 | default: 122 | return '' 123 | } 124 | } 125 | 126 | /*! 127 | * Holds chart type selected by user. 128 | */ 129 | property int type: MChart.Type.Invalid 130 | 131 | onTypeChanged: { 132 | chartType = typeToString(type) 133 | 134 | if (chartType === '') { 135 | console.log("Chart type is unsupported") 136 | } 137 | 138 | prepareChartData() 139 | } 140 | 141 | /*! 142 | * Data points for the chart. Each MDataset represents a separate set of 143 | * data to display. For example, in a Line chart, each MDataset will draw 144 | * a different line on the chart. 145 | */ 146 | property list data 147 | 148 | /*! 149 | * Used to define general options for the whole chart: 150 | * \li colors 151 | * \li fonts 152 | * \li scale ranges 153 | * \li and so on 154 | */ 155 | property MChartOptions options: MChartOptions { 156 | isLinear: type === MChart.Type.Bar || type === MChart.Type.Line 157 | || type === MChart.Type.Scatter || type === MChart.Type.Bubble 158 | hasScale: type !== MChart.Type.Pie && type !== MChart.Type.Doughnut 159 | } 160 | 161 | /*! 162 | * Labels - these are values which populate x axis. 163 | */ 164 | property var labels: [] 165 | 166 | /*! 167 | * When set to `true`, MChart error reporting will be silenced. 168 | */ 169 | property bool silent: false 170 | 171 | /*! 172 | * Converts chart data to suitable format for Bar and RADAR charts. 173 | */ 174 | function prepareChartData() { 175 | let labelsCount = labels.length 176 | let datasets = [] 177 | let min = 0 178 | let max = 0 179 | for (let i = 0 ; i < data.length ; ++i) { 180 | let valuesCount = data[i].values.length 181 | if (labelsCount !== valuesCount && !silent) { 182 | console.error("Number of labels", labelsCount, 183 | "does not match number of values", valuesCount) 184 | } 185 | 186 | min = Math.min(min, data[i].suggestedMin) 187 | max = Math.max(max, data[i].suggestedMax) 188 | 189 | datasets.push({ 190 | label: data[i].name, 191 | data: data[i].values, 192 | backgroundColor: data[i].getFillColor(), 193 | borderColor: data[i].getLineColor(), 194 | pointBackgroundColor: data[i].getPointColor(), 195 | type: typeToString(data[i].type) 196 | // TODO: add all style configuration options (per chart 197 | // type!) to MDataset. 198 | // TODO: provide dataset object as property (same as 199 | // MChartOptions.options) 200 | }) 201 | } 202 | 203 | chartData = { 204 | labels: labels, 205 | datasets: datasets 206 | } 207 | 208 | options.min = Math.floor(min) 209 | options.max = Math.ceil(max) 210 | 211 | requestPaint() 212 | 213 | //console.log("Type", chartType, "min", options.min, "max", options.max) 214 | } 215 | 216 | chartOptions: options.options 217 | 218 | renderStrategy: Canvas.Threaded 219 | 220 | onDataChanged: { 221 | for (let i = 0; i < data.length; ++i) { 222 | // Sever any existing connection 223 | data[i].updated.disconnect(prepareChartData) 224 | // Establish new connection 225 | data[i].updated.connect(prepareChartData) 226 | } 227 | } 228 | 229 | Component.onCompleted: prepareChartData() 230 | } 231 | -------------------------------------------------------------------------------- /MChartOptions.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | 3 | // TODO: separate parts (title, tooltips, legend etc.) into other objects 4 | 5 | QtObject { 6 | /*! 7 | * When `true`, chart will draw its scales. 8 | */ 9 | property bool hasScale: true 10 | 11 | /*! 12 | * When `true`, chart will use linear scale options. 13 | */ 14 | property bool isLinear: true 15 | 16 | /*! 17 | * Minimum scale value. 18 | */ 19 | property var min: 0 20 | 21 | /*! 22 | * Maximum scale value. 23 | */ 24 | property var max: 1 25 | 26 | // TITLE 27 | 28 | /*! 29 | * When set to `true`, chart tile will be shown. By default, title is shown 30 | * only when it is not empty. 31 | */ 32 | property bool titleDisplay: title.length > 0 33 | 34 | /*! 35 | * Title of the chart, displayed on top 36 | */ 37 | property string title 38 | 39 | /*! 40 | * Font used to draw the chart title 41 | */ 42 | property font titleFont 43 | titleFont { 44 | pixelSize: 18 45 | family: "sans-serif" 46 | } 47 | 48 | /*! 49 | * Color used to draw the chart title 50 | */ 51 | property color titleFontColor: "#0000bf" 52 | 53 | /*! 54 | * Chart title settings object, constructed from displayTitle, title, 55 | * titleFont, titleFontColor properties. 56 | */ 57 | property var titleObject: { 58 | "display": titleDisplay, 59 | "text": title, 60 | "fontSize": titleFont.pointSize, 61 | "fontFamily": titleFont.family, 62 | "fontColor": qmlHelpers.htmlColor(titleFontColor) 63 | } 64 | 65 | // SCALE(S) 66 | 67 | /*! 68 | * Width of the main scale line. 69 | */ 70 | property int scaleLineWidth: 1 71 | 72 | /*! 73 | * Font to draw scale values with. 74 | */ 75 | property font scaleFont 76 | scaleFont { 77 | pixelSize: 14 78 | family: "sans-serif" 79 | } 80 | 81 | /*! 82 | * Color of scale font. 83 | */ 84 | property color scaleFontColor: "#0a0a0a" 85 | 86 | /*! 87 | * Internal property used to construct chart options object. 88 | */ 89 | readonly property string _scalesString: isLinear? '"scales"' : '"scale"' 90 | 91 | /*! 92 | * Scales object used to define scales in radial charts. 93 | */ 94 | property var radialScalesObject: { 95 | "angleLines": { 96 | display: true 97 | }, 98 | "ticks": { 99 | suggestedMin: min, 100 | suggestedMax: max, 101 | fontSize: scaleFont.pointSize, 102 | fontFamily: scaleFont.family, 103 | fontColor: qmlHelpers.htmlColor(scaleFontColor) 104 | } 105 | } 106 | 107 | /*! 108 | * Scales object used to define scales in linear charts. 109 | */ 110 | property var linearScalesObject: { 111 | "xAxes": [{ 112 | "ticks": { 113 | fontSize: scaleFont.pointSize, 114 | fontFamily: scaleFont.family, 115 | fontColor: qmlHelpers.htmlColor(scaleFontColor) 116 | }, 117 | "gridLines": { 118 | lineWidth: scaleLineWidth 119 | } 120 | }], 121 | "yAxes": [{ 122 | "ticks": { 123 | min: min, 124 | max: max, 125 | fontSize: scaleFont.pointSize, 126 | fontFamily: scaleFont.family, 127 | fontColor: qmlHelpers.htmlColor(scaleFontColor) 128 | }, 129 | "gridLines": { 130 | lineWidth: scaleLineWidth 131 | } 132 | }], 133 | } 134 | 135 | // LEGEND 136 | 137 | /*! 138 | * When set to `true`, chart legend will be shown. By default, title is shown. 139 | */ 140 | property bool legendDisplay: true 141 | 142 | /*! 143 | * When set to `true`, chart legend will be reversed. 144 | */ 145 | property bool legendReverse: false 146 | 147 | /*! 148 | * Font to draw legend with. 149 | */ 150 | property font legendFont 151 | legendFont { 152 | pixelSize: 16 153 | family: "sans-serif" 154 | } 155 | 156 | /*! 157 | * Color of legend font. 158 | */ 159 | property color legendFontColor: "#505050" 160 | 161 | /*! 162 | * Legend object definitions. 163 | */ 164 | property var legendObject: { 165 | "display": legendDisplay, 166 | "reverse": legendReverse, 167 | "labels": { 168 | fontSize: legendFont.pointSize, 169 | fontFamily: legendFont.family, 170 | fontColor: qmlHelpers.htmlColor(legendFontColor) 171 | } 172 | } 173 | 174 | // ANIMATIONS 175 | 176 | /*! 177 | * Duration of all chart animations. 178 | */ 179 | property int animationDuration: 500 180 | 181 | /*! 182 | * Easing used to all chart animations. 183 | */ 184 | property string animationEasing: 'easeOutQuart' 185 | 186 | /*! 187 | * General animation settings object. 188 | */ 189 | property var animationOptionsObject: { 190 | "duration": animationDuration, 191 | "easing": animationEasing, 192 | "onProgress": null, 193 | "onComplete": null 194 | } 195 | 196 | /*! 197 | * Hover options object. 198 | */ 199 | property var hoverOptionsObject: { 200 | "animationDuration": animationDuration 201 | } 202 | 203 | /*! 204 | * How long it should take to redraw the chart when size is changed. 205 | */ 206 | property int responsiveAnimationDuration: 0 207 | 208 | // LAYOUTS (padding) 209 | 210 | /*! 211 | * Global padding: setting this value will set this padding for all sides 212 | * (top, bottom, left and right). 213 | */ 214 | property int padding: 0 215 | 216 | /*! 217 | * Padding value applied from the top. 218 | */ 219 | property int topPadding: 0 220 | 221 | /*! 222 | * Padding value applied from the left. 223 | */ 224 | property int leftPadding: 0 225 | 226 | /*! 227 | * Padding value applied from the bottom. 228 | */ 229 | property int bottomPadding: 0 230 | 231 | /*! 232 | * Padding value applied from the right. 233 | */ 234 | property int rightPadding: 0 235 | 236 | /*! 237 | * Internal property, determined which padding option style to use. 238 | */ 239 | property bool _isSpecificPadding: padding === 0 240 | && (topPadding !== 0 || leftPadding !== 0 241 | || bottomPadding !== 0 || rightPadding !== 0) 242 | 243 | /*! 244 | * Internal property, used to specify global padding. 245 | */ 246 | property var _paddingGlobalObject: { 247 | "padding": padding 248 | } 249 | 250 | /*! 251 | * Internal property, used to specify specific padding. 252 | */ 253 | property var _paddingSpecificObject: { 254 | "padding": { 255 | left: leftPadding, 256 | right: rightPadding, 257 | top: topPadding, 258 | bottom: bottomPadding 259 | } 260 | } 261 | 262 | /*! 263 | * Padding object used passed to options property. 264 | */ 265 | property var paddingObject: _isSpecificPadding? _paddingSpecificObject 266 | : _paddingGlobalObject 267 | 268 | // TOOLTIPS 269 | // https://www.chartjs.org/docs/latest/configuration/tooltip.html 270 | 271 | property bool tooltipsDisplay: true 272 | property color tooltipsBackgrdounColor: "#000000" 273 | property font tooltipsTitleFont 274 | tooltipsTitleFont: { 275 | pixelSize: 14 276 | family: "sans-serif" 277 | } 278 | property color tooltipsTitleFontColor: "#ffffff" 279 | 280 | property var tooltipsObject: { 281 | "enabled": tooltipsDisplay, 282 | "backgroundColor": qmlHelpers.htmlColor(tooltipsBackgrdounColor), 283 | "titleFontFamily": tooltipsTitleFont.family, 284 | "titleFontSize": tooltipsTitleFont.pointSize, 285 | "titleFontColor": qmlHelpers.htmlColor(tooltipsTitleFontColor) 286 | } 287 | 288 | // RESULTING OPTIONS: 289 | 290 | /*! 291 | * Internal property used to construct the chart options object. 292 | */ 293 | property string _optionsString: 294 | "{" + 295 | (hasScale? (_scalesString + ": " 296 | + JSON.stringify((isLinear? linearScalesObject : radialScalesObject)) + ",") 297 | : "") 298 | + '"title": ' + JSON.stringify(titleObject) + "," 299 | + '"legend": ' + JSON.stringify(legendObject) + "," 300 | + '"animation": ' + JSON.stringify(animationOptionsObject) + "," 301 | + '"layout": ' + JSON.stringify(paddingObject) + "," 302 | + '"hover": ' + JSON.stringify(hoverOptionsObject) + "," 303 | + '"tooltips": ' + JSON.stringify(tooltipsObject) + "," 304 | + '"responsiveAnimationDuration": ' + responsiveAnimationDuration 305 | + "}" 306 | 307 | /*! 308 | * Chart options object, costructed from all properties of MChartOptions 309 | * component. 310 | */ 311 | property var options: JSON.parse(_optionsString) 312 | 313 | //on_OptionsStringChanged: console.log("Opts:", _optionsString) 314 | } 315 | -------------------------------------------------------------------------------- /examples/showcase-example/main.qml: -------------------------------------------------------------------------------- 1 | /******************************************************************************* 2 | Copyright (C) 2020 Milo Solutions 3 | Contact: https://www.milosolutions.com 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 | *******************************************************************************/ 23 | 24 | import QtQuick 2.15 25 | import QtQuick.Window 2.2 26 | import QtQuick.Layouts 1.3 27 | 28 | import "mcharts" 29 | 30 | Window { 31 | visible: true 32 | width: 1000 33 | height: 800 34 | 35 | GridLayout { 36 | anchors.fill: parent 37 | columns: 3 38 | 39 | MChart { 40 | id: chart1 41 | 42 | Layout.fillWidth: true 43 | Layout.fillHeight: true 44 | 45 | type: MChart.Type.Bar 46 | labels: dataProvider.getLabels() 47 | 48 | options.title: qsTr("A title") 49 | options.padding: 20 50 | 51 | data: [ 52 | // Each bar in different color 53 | MDataset { 54 | name: "Set 1" 55 | values: [1, 2, 2.1, 0.1, 0.7, 1.1, 1.4] 56 | fillColors: dataProvider.getColors() 57 | lineColors: dataProvider.getColors() 58 | pointColors: dataProvider.getColors() 59 | }, 60 | 61 | // Each bar in the same color 62 | MDataset { 63 | name: "Set 2" 64 | values: dataProvider.getValues2() 65 | fillColor: dataProvider.getColors()[3] 66 | lineColor: dataProvider.getColors()[4] 67 | pointColor: dataProvider.getColors()[5] 68 | } 69 | ] 70 | } 71 | 72 | MChart { 73 | id: chart2 74 | 75 | Layout.fillWidth: true 76 | Layout.fillHeight: true 77 | 78 | type: MChart.Type.Pie 79 | labels: dataProvider.getLabels() 80 | 81 | options.leftPadding: 100 82 | 83 | data: [ 84 | MDataset { 85 | name: "Set 1" 86 | values: dataProvider.getValues() 87 | fillColors: dataProvider.getColors() 88 | lineColors: dataProvider.getColors() 89 | pointColors: dataProvider.getColors() 90 | }, 91 | 92 | MDataset { 93 | name: "Set 2" 94 | values: dataProvider.getValues2() 95 | fillColors: dataProvider.getColors2() 96 | lineColors: dataProvider.getColors2() 97 | pointColors: dataProvider.getColors2() 98 | } 99 | ] 100 | } 101 | 102 | MChart { 103 | id: chart3 104 | 105 | Layout.fillWidth: true 106 | Layout.fillHeight: true 107 | 108 | type: MChart.Type.Line 109 | labels: dataProvider.getLabels() 110 | 111 | data: [ 112 | MDataset { 113 | name: "Set 3" 114 | values: dataProvider.getValues() 115 | fillColor: dataProvider.getColors()[2] 116 | lineColor: dataProvider.getColors()[1] 117 | pointColor: dataProvider.getColors()[0] 118 | }, 119 | 120 | MDataset { 121 | name: "Set 4" 122 | values: dataProvider.getValues2() 123 | fillColor: dataProvider.getColors()[5] 124 | lineColor: dataProvider.getColors()[4] 125 | pointColor: dataProvider.getColors()[3] 126 | } 127 | ] 128 | } 129 | 130 | MChart { 131 | id: chart4 132 | 133 | Layout.fillWidth: true 134 | Layout.fillHeight: true 135 | 136 | type: MChart.Type.Radar 137 | labels: dataProvider.getLabels() 138 | 139 | data: [ 140 | MDataset { 141 | name: "Set 1" 142 | values: dataProvider.getValues() 143 | fillColor: dataProvider.getColors()[0] 144 | lineColor: dataProvider.getColors()[1] 145 | pointColors: dataProvider.getColors() 146 | } 147 | ] 148 | } 149 | 150 | MChart { 151 | id: chart5 152 | 153 | Layout.fillWidth: true 154 | Layout.fillHeight: true 155 | 156 | type: MChart.Type.Doughnut 157 | labels: dataProvider.getLabels() 158 | 159 | data: [ 160 | MDataset { 161 | name: "Set 1" 162 | values: dataProvider.getValues() 163 | fillColors: dataProvider.getColors2() 164 | lineColor: dataProvider.getColors()[1] 165 | pointColor: dataProvider.getColors()[2] 166 | }, 167 | 168 | MDataset { 169 | name: "Set 2" 170 | values: dataProvider.getValues2() 171 | fillColors: dataProvider.getColors() 172 | lineColor: dataProvider.getColors()[4] 173 | pointColor: dataProvider.getColors()[5] 174 | } 175 | ] 176 | } 177 | 178 | MChart { 179 | id: chart6 180 | 181 | Layout.fillWidth: true 182 | Layout.fillHeight: true 183 | 184 | type: MChart.Type.PolarArea 185 | labels: dataProvider.getLabels() 186 | 187 | data: [ 188 | MDataset { 189 | name: "Set 1" 190 | values: dataProvider.getValues() 191 | fillColors: dataProvider.getColors() 192 | lineColor: dataProvider.getColors()[1] 193 | pointColor: dataProvider.getColors()[2] 194 | } 195 | ] 196 | } 197 | 198 | MChart { 199 | id: chart7 200 | 201 | Layout.fillWidth: true 202 | Layout.fillHeight: true 203 | 204 | type: MChart.Type.Bubble 205 | labels: dataProvider.getLabels() 206 | 207 | data: [ 208 | MDataset { 209 | name: "Set 1" 210 | values: dataProvider.getBubbleValues() 211 | fillColors: dataProvider.getColors() 212 | lineColors: dataProvider.getColors() 213 | pointColors: dataProvider.getColors() 214 | }, 215 | 216 | MDataset { 217 | name: "Set 2" 218 | values: dataProvider.getBubbleValues2() 219 | fillColors: dataProvider.getColors2() 220 | lineColors: dataProvider.getColors2() 221 | pointColors: dataProvider.getColors2() 222 | } 223 | ] 224 | } 225 | 226 | MChart { 227 | id: chart8 228 | 229 | Layout.fillWidth: true 230 | Layout.fillHeight: true 231 | 232 | type: MChart.Type.Scatter 233 | labels: dataProvider.getLabels() 234 | 235 | data: [ 236 | MDataset { 237 | name: "Set 1" 238 | values: dataProvider.getPointValues() 239 | fillColors: dataProvider.getColors() 240 | lineColors: dataProvider.getColors() 241 | pointColors: dataProvider.getColors() 242 | suggestedMin: 0 243 | suggestedMax: 4 244 | }, 245 | 246 | MDataset { 247 | name: "Set 2" 248 | values: dataProvider.getPointValues2() 249 | 250 | fillColors: dataProvider.getColors2() 251 | lineColors: dataProvider.getColors2() 252 | pointColors: dataProvider.getColors2() 253 | suggestedMin: 0 254 | suggestedMax: 4 255 | } 256 | ] 257 | } 258 | 259 | // MChart { 260 | // id: chart9 261 | 262 | // Layout.fillWidth: true 263 | // Layout.fillHeight: true 264 | 265 | // type: MChart.Type.Area 266 | // labels: dataProvider.getLabels() 267 | 268 | // data: [ 269 | // MDataset { 270 | // name: "Set 1" 271 | // values: dataProvider.getValues() 272 | // fillColors: dataProvider.getColors() 273 | // lineColors: dataProvider.getColors() 274 | // pointColors: dataProvider.getColors() 275 | // }, 276 | 277 | // MDataset { 278 | // name: "Set 2" 279 | // values: dataProvider.getValues2() 280 | // fillColors: dataProvider.getColors2() 281 | // lineColors: dataProvider.getColors2() 282 | // pointColors: dataProvider.getColors2() 283 | // } 284 | // ] 285 | // } 286 | 287 | // Mixed chart 288 | MChart { 289 | id: chart10 290 | 291 | Layout.fillWidth: true 292 | Layout.fillHeight: true 293 | 294 | type: MChart.Type.Bar 295 | labels: dataProvider.getLabels() 296 | 297 | data: [ 298 | MDataset { 299 | name: "Set 1" 300 | values: dataProvider.getValues() 301 | fillColors: dataProvider.getColors() 302 | lineColors: dataProvider.getColors() 303 | pointColors: dataProvider.getColors() 304 | }, 305 | 306 | MDataset { 307 | type: MChart.Type.Line 308 | name: "Set 2" 309 | values: dataProvider.getValues2() 310 | fillColor: dataProvider.getColors2()[3] 311 | lineColor: dataProvider.getColors2()[4] 312 | pointColors: dataProvider.getColors2() 313 | } 314 | ] 315 | } 316 | } 317 | } 318 | -------------------------------------------------------------------------------- /doc/branding/milo-doxygen.css: -------------------------------------------------------------------------------- 1 | /* Milo Solution theme for doxygen 1.8 @ 2016 */ 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext); 3 | * { 4 | font-family: "Open Sans",sans-serif; } 5 | 6 | /* Graphics for header */ 7 | body { 8 | background-color: #FAFAFA; 9 | color: #444; } 10 | 11 | .tabs, .tabs2, .tabs3 { 12 | background: #444444; 13 | font-size: 13px; 14 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ } 15 | 16 | #top * { 17 | font-weight: normal; } 18 | 19 | .tablist { 20 | line-height: 36px; } 21 | .tablist li { 22 | background: #444444; 23 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png'); */ } 24 | .tablist a { 25 | background-image: url("https://docs.milosolutions.com/img/separator.png"); 26 | color: #FFF; 27 | text-shadow: 0px 1px 0px rgba(27, 27, 29, 0.9); } 28 | .tablist a:hover { 29 | background: #303030; 30 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png'); */ 31 | color: #ffcc00; } 32 | .tablist li.current a { 33 | background: #303030; 34 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ 35 | /*color: #F8AA2D;*/ 36 | color: #ffcc00; 37 | border-right: 1px solid #000; 38 | box-sizing: border-box; } 39 | 40 | #navrow1 { 41 | border-bottom: 1px solid #000; 42 | -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); 43 | -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); 44 | box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); } 45 | 46 | #navrow2 { 47 | background: none; } 48 | #navrow2 > .tablist > li { 49 | clear: both; 50 | display: block; 51 | width: 200px; } 52 | 53 | a.el { 54 | color: #000; 55 | font-weight: normal; } 56 | 57 | h1, h2, h3, h4, h5, h6 { 58 | color: #000; } 59 | 60 | /* Doxygen colors modifications */ 61 | h1.groupheader { 62 | font-size: 130%; } 63 | 64 | .title { 65 | font-size: 150%; 66 | font-weight: normal; 67 | font-size: 25px; 68 | margin: 20px 0; 69 | color: #000; } 70 | 71 | .textblock { 72 | background: #FFF; 73 | border: 1px solid #DDD; 74 | box-sizing: border-box; 75 | width: calc(75%); 76 | float: right; 77 | padding: 20px; } 78 | .textblock .image { 79 | overflow: hidden; } 80 | 81 | div.headertitle { 82 | padding: 0; 83 | margin: 0 20px; } 84 | 85 | h2.groupheader { 86 | border-bottom: 1px solid #7D7D74; 87 | color: #454540; 88 | font-size: 115%; } 89 | 90 | h3.groupheader { 91 | font-size: 100%; } 92 | 93 | div.qindex, div.navtab { 94 | background-color: #FFFFEE; 95 | border: 1px solid #696961; } 96 | 97 | a { 98 | color: #C75411; } 99 | 100 | div.contents { 101 | padding: 0 20px; 102 | border: none; 103 | background: #FAFAFA; 104 | margin-left: 0; } 105 | 106 | .contents a:visited { 107 | color: #B34C0F; } 108 | 109 | a.qindexHL { 110 | background-color: #87877E; 111 | color: #ffffff; 112 | border: 1px double #787870; } 113 | 114 | .contents a.qindexHL:visited { 115 | color: #ffffff; } 116 | 117 | a.code, a.line, a.codeRef, a.lineRef { 118 | color: #B34C0F; } 119 | a.code:visited, a.line:visited, a.codeRef:visited, a.lineRef:visited { 120 | color: #B34C0F; } 121 | 122 | pre.fragment { 123 | border: 1px solid #B0B0A4; 124 | background-color: #FFFFEE; } 125 | 126 | div.fragment { 127 | background-color: #FFFFEE; 128 | border: 1px solid #B0B0A4; } 129 | 130 | span.lineno { 131 | border-right: 2px solid #0F0; 132 | background-color: #E8E8E8; } 133 | span.lineno a { 134 | background-color: #D8D8D8; } 135 | span.lineno a:hover { 136 | background-color: #C8C8C8; } 137 | 138 | td.indexkey, td.indexvalue { 139 | background-color: #FFFFEE; 140 | border: 1px solid #B0B0A4; } 141 | 142 | tr.memlist { 143 | background-color: #EEF1F7; } 144 | 145 | span.keyword { 146 | color: #008000; } 147 | span.keywordtype { 148 | color: #604020; } 149 | span.keywordflow { 150 | color: #e08000; } 151 | span.comment { 152 | color: #800000; } 153 | span.preprocessor { 154 | color: #806020; } 155 | span.stringliteral { 156 | color: #002080; } 157 | span.charliteral { 158 | color: #008080; } 159 | span.vhdldigit { 160 | color: #ff00ff; } 161 | span.vhdlchar { 162 | color: #000000; } 163 | span.vhdlkeyword { 164 | color: #700070; } 165 | span.vhdllogic { 166 | color: #ff0000; } 167 | 168 | blockquote { 169 | background-color: #FAFAE9; 170 | border-left: 2px solid #87877E; } 171 | 172 | .dirtab { 173 | border: 1px solid #696961; } 174 | 175 | th.dirtab { 176 | background: #FFFFEE; } 177 | 178 | hr { 179 | /*border-top: 1px solid #BF8323;*/ 180 | display: none; } 181 | 182 | .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams { 183 | background-color: #FFFFEE; } 184 | 185 | .mdescLeft, .mdescRight { 186 | color: #555; } 187 | 188 | .memSeparator { 189 | border-bottom: 1px solid #E6E6D6; } 190 | 191 | .memTemplParams, .memtemplate { 192 | color: #B34C0F; } 193 | 194 | .memnav { 195 | background-color: #FFFFEE; 196 | border: 1px solid #696961; } 197 | 198 | .memproto, dl.reflist dt { 199 | border-top: 1px solid #A8A89D; 200 | border-left: 1px solid #A8A89D; 201 | border-right: 1px solid #A8A89D; 202 | color: #21211F; 203 | background-color: #E8E8D9; 204 | background-image: url("https://docs.milosolutions.com/img/nav_m.png"); } 205 | 206 | .memdoc, dl.reflist dd { 207 | border-bottom: 1px solid #A8A89D; 208 | border-left: 1px solid #A8A89D; 209 | border-right: 1px solid #A8A89D; 210 | background-color: #FFFFFF; } 211 | 212 | .paramname { 213 | color: #602020; } 214 | 215 | span.mlabel { 216 | background-color: #85857C; 217 | border-top: 1px solid #61615A; 218 | border-left: 1px solid #61615A; 219 | border-right: 1px solid #B0B0A4; 220 | border-bottom: 1px solid #B0B0A4; } 221 | 222 | div.directory { 223 | /*border-top: 1px solid #A8A89D;*/ 224 | /*border-bottom: 1px solid #A8A89D;*/ 225 | border: none; 226 | margin: 0 20px; 227 | width: calc(75% - 20px); 228 | float: right; } 229 | 230 | .directory td.desc { 231 | border: none; } 232 | .directory tr.even { 233 | /*background-color: #fcf5f1;*/ 234 | background-color: transparent; } 235 | .directory .levels span { 236 | color: #C75411; } 237 | 238 | address { 239 | color: #AAA; } 240 | address.footer { 241 | text-align: center; 242 | padding-left: 12px; 243 | padding-top: 20px; 244 | padding-bottom: 20px; 245 | clear: both; } 246 | address.footer a { 247 | text-decoration: none; } 248 | address.footer a img { 249 | width: 70px; } 250 | 251 | table.doxtable td { 252 | border: 1px solid #87390C; } 253 | table.doxtable th { 254 | border: 1px solid #87390C; 255 | background-color: #30302D; 256 | color: #FFFFFF; } 257 | table.doxtable a { 258 | color: #ffcc00; } 259 | table.doxtable a:hover { 260 | color: #e3b705; } 261 | table.fieldtable { 262 | border: 1px solid #A8A89D; } 263 | 264 | .fieldtable td.fieldtype, .fieldtable td.fieldname { 265 | border-right: 1px solid #A8A89D; 266 | border-bottom: 1px solid #A8A89D; } 267 | .fieldtable td.fielddoc { 268 | border-bottom: 1px solid #A8A89D; } 269 | .fieldtable th { 270 | background-image: url("https://docs.milosolutions.com/img/nav_m.png"); 271 | background-color: #E8E8D9; 272 | color: #21211F; 273 | border-bottom: 1px solid #A8A89D; } 274 | 275 | .tabsearch { 276 | background: #444444; 277 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ } 278 | 279 | .navpath ul { 280 | color: #7D7D75; 281 | border: solid 1px #C2C2B6; 282 | background-image: url("https://docs.milosolutions.com/img/tab_m.png"); } 283 | 284 | /*custom list style dot*/ 285 | .textblock ul { 286 | list-style: none; 287 | padding: 0; 288 | margin: 0; } 289 | .textblock ul li { 290 | padding-left: 1em; 291 | text-indent: -.7em; } 292 | .textblock ul li:before { 293 | content: '\2022 \00a0'; 294 | color: #c75411; } 295 | 296 | /*////////////////////*/ 297 | .navpath li { 298 | color: #363632; 299 | background-image: url("bc_s.png"); } 300 | .navpath li.navelem a { 301 | color: #262623; 302 | text-shadow: 0px 1px 1px rgba(29, 29, 27, 0.9); } 303 | .navpath li.navelem a:hover { 304 | color: #E36014; } 305 | 306 | div.header { 307 | /*background-image:url('https://docs.milosolutions.com/img/nav_hm.png');*/ 308 | background: none; 309 | border-bottom: none; } 310 | 311 | dl.note { 312 | border-color: #D0C000; } 313 | dl.warning, dl.attention { 314 | border-color: #FF0000; } 315 | dl.pre, dl.post, dl.invariant { 316 | border-color: #00D000; } 317 | dl.deprecated { 318 | border-color: #505050; } 319 | dl.todo { 320 | border-color: #00C0E0; } 321 | dl.test { 322 | border-color: #3030E0; } 323 | dl.bug { 324 | border-color: #C08050; } 325 | 326 | #titlearea { 327 | border: none; 328 | display: none; } 329 | 330 | div.zoom { 331 | border: 1px solid #96968C; } 332 | 333 | dl.citelist dt { 334 | color: #454540; } 335 | 336 | div.toc { 337 | background-color: #FFF; 338 | border: 1px solid #ddd; 339 | box-sizing: border-box; 340 | border-radius: 0; 341 | padding: 20px; 342 | margin: 0 20px 0 0; 343 | width: calc(25% - 20px); 344 | float: left; } 345 | div.toc li { 346 | background: url("https://docs.milosolutions.com/img/goto.png") no-repeat scroll 0 5px transparent; 347 | font: 14px Open Sans, sans-serif; 348 | padding-top: 6px; 349 | padding-left: 20px; } 350 | div.toc li a { 351 | font-weight: 600; } 352 | div.toc h3 { 353 | text-transform: uppercase; 354 | color: #000; 355 | font-size: 14px; 356 | font-family: "Open Sans", sans-serif; } 357 | 358 | .inherit_header { 359 | color: gray; } 360 | 361 | #powerTip div.ttdeci { 362 | color: #006318; } 363 | #powerTip.n:after, #powerTip.s:after, #powerTip.w:after, #powerTip.e:after, #powerTip.nw:after, #powerTip.ne:after, #powerTip.sw:after, #powerTip.se:after { 364 | border-color: rgba(255, 255, 255, 0); } 365 | #powerTip.n:before, #powerTip.s:before, #powerTip.w:before, #powerTip.e:before, #powerTip.nw:before, #powerTip.ne:before, #powerTip.sw:before, #powerTip.se:before { 366 | border-color: rgba(128, 128, 128, 0); } 367 | #powerTip.n:after, #powerTip.ne:after, #powerTip.nw:after { 368 | border-top-color: #ffffff; } 369 | #powerTip.n:before { 370 | border-top-color: #808080; } 371 | #powerTip.s:after, #powerTip.se:after, #powerTip.sw:after { 372 | border-bottom-color: #ffffff; } 373 | #powerTip.s:before, #powerTip.se:before, #powerTip.sw:before { 374 | border-bottom-color: #808080; 375 | border-width: 11px; 376 | margin: 0px -11px; } 377 | #powerTip.e:after { 378 | border-left-color: #ffffff; } 379 | #powerTip.e:before { 380 | border-left-color: #808080; } 381 | #powerTip.w:after { 382 | border-right-color: #ffffff; } 383 | #powerTip.w:before { 384 | border-right-color: #808080; } 385 | 386 | .custom-submenu { 387 | padding-left: 0; 388 | position: absolute; } 389 | .custom-submenu li { 390 | clear: both; 391 | width: 200px; } 392 | .custom-submenu li a span { 393 | color: #FFF; } 394 | .custom-submenu li.current a span { 395 | color: #ffcc00; } 396 | 397 | #navrow1 .tablist .current ul { 398 | display: none; } 399 | #navrow1 .tablist .current:hover ul { 400 | display: block; } 401 | 402 | #navrow3 { 403 | background: #e8e8e8; } 404 | #navrow3 .tablist a { 405 | background: #e8e8e8; 406 | color: #000; 407 | text-shadow: none; } 408 | #navrow3 .tablist li.current a { 409 | border-right: none; 410 | border-bottom: 3px solid #FF6F00; } 411 | 412 | div.qindex, div.navtab { 413 | background-color: #FFF; 414 | border: 1px solid #ddd; 415 | padding: 20px 0; 416 | color: #ddd; } 417 | 418 | #navrow4 { 419 | background: #FFF; 420 | border: 1px solid #ddd; } 421 | #navrow4 .tablist a { 422 | background: #FFF; 423 | color: #000; 424 | text-shadow: none; } 425 | #navrow4 .tablist li.current a { 426 | border-right: none; 427 | border-bottom: 3px solid #FF6F00; } 428 | 429 | .directory .levels { 430 | margin-top: 5px; } 431 | .directory .levels span { 432 | color: #4e4e4e; 433 | background: #f2f2f2; 434 | margin: 5px; 435 | padding: 2px 9px; 436 | border: 1px solid #ddd; 437 | border-radius: 4px; 438 | -webkit-box-shadow: inset 1px 1px 0px 0px white; 439 | -moz-box-shadow: inset 1px 1px 0px 0px white; 440 | box-shadow: inset 1px 1px 0px 0px white; } 441 | .directory .levels span:hover { 442 | background: #eaeaea; } 443 | .directory table { 444 | margin-top: 20px; } 445 | 446 | .custom-contents > div { 447 | width: 100%; } 448 | .custom-contents .directory { 449 | margin-left: 20px; } 450 | 451 | .contents .image img { 452 | width: 100%; } 453 | 454 | @media screen and (min-width: 1200px) { 455 | .textblock { 456 | padding: 20px 20% 20px 20px; 457 | text-align: justify; } } 458 | #titlearea { 459 | background-color: #444444; 460 | display: block; 461 | border-bottom: solid 1px #000; } 462 | 463 | #titlearea tr { 464 | color: #FFF; } 465 | 466 | #projectlogo { 467 | vertical-align: middle; 468 | padding: 0 25px; } 469 | 470 | #projectlogo img { 471 | max-height: 50px; } 472 | 473 | #projectname { 474 | font-size: 22px; 475 | font-weight: 500; 476 | font-family: "Open Sans",sans-serif; } 477 | 478 | #projectbrief { 479 | font-size: 12px; 480 | font-family: "Open Sans",sans-serif; 481 | padding-bottom: 6px; 482 | color: #CCC; } 483 | 484 | /*.contents .textblock * { 485 | font-weight: inherit !important; }*/ 486 | 487 | a.el { 488 | color: #B34C0F; } 489 | 490 | #top * { 491 | font-weight: normal; } 492 | 493 | /*# sourceMappingURL=milo-doxygen-2.css.map */ 494 | -------------------------------------------------------------------------------- /doc/branding/milo-doxygen.scss: -------------------------------------------------------------------------------- 1 | /* Milo Solution theme for doxygen 1.8 @ 2016 */ 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext); 3 | 4 | * { 5 | font-family: "Open Sans",sans-serif; 6 | } 7 | 8 | /* Graphics for header */ 9 | 10 | body { 11 | background-color: #FAFAFA; 12 | color: #444; 13 | } 14 | 15 | .tabs, .tabs2, .tabs3 { 16 | background: #444444; 17 | font-size: 13px; 18 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ 19 | } 20 | #top *{ 21 | font-weight:normal; 22 | } 23 | .tablist { 24 | line-height: 36px; 25 | li { 26 | background: #444444; 27 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png'); */ 28 | } 29 | a { 30 | background-image: url('https://docs.milosolutions.com/img/separator.png'); 31 | color: #FFF; 32 | text-shadow: 0px 1px 0px rgba(27, 27, 29, 0.9); 33 | &:hover { 34 | background: #303030; 35 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png'); */ 36 | color: #ffcc00; 37 | } 38 | } 39 | li.current a { 40 | background: #303030; 41 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ 42 | /*color: #F8AA2D;*/ 43 | color: #ffcc00; 44 | border-right: 1px solid #000; 45 | box-sizing: border-box; 46 | } 47 | } 48 | 49 | #navrow1 { 50 | border-bottom: 1px solid #000; 51 | -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); 52 | -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); 53 | box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25); 54 | } 55 | 56 | #navrow2 { 57 | background: none; 58 | > .tablist > li { 59 | clear: both; 60 | display: block; 61 | width: 200px; 62 | } 63 | } 64 | 65 | a.el { 66 | color: #000; 67 | font-weight: normal; 68 | } 69 | 70 | h1, h2, h3, h4, h5, h6 { 71 | color: #000; 72 | } 73 | 74 | /* Doxygen colors modifications */ 75 | 76 | h1.groupheader { 77 | font-size: 130%; 78 | } 79 | 80 | .title { 81 | font-size: 150%; 82 | font-weight: normal; 83 | font-size: 25px; 84 | margin: 20px 0; 85 | color: #000; 86 | } 87 | 88 | .textblock { 89 | background: #FFF; 90 | border: 1px solid #DDD; 91 | box-sizing: border-box; 92 | width: calc(75%); 93 | float: right; 94 | padding: 20px; 95 | .image { 96 | overflow: hidden; 97 | } 98 | } 99 | 100 | div.headertitle { 101 | padding: 0; 102 | margin: 0 20px; 103 | } 104 | 105 | h2.groupheader { 106 | border-bottom: 1px solid #7D7D74; 107 | color: #454540; 108 | font-size: 115%; 109 | } 110 | 111 | h3.groupheader { 112 | font-size: 100%; 113 | } 114 | 115 | div { 116 | &.qindex, &.navtab { 117 | background-color: #FFFFEE; 118 | border: 1px solid #696961; 119 | } 120 | } 121 | 122 | a { 123 | color: #C75411; 124 | } 125 | 126 | div.contents { 127 | padding: 0 20px; 128 | border: none; 129 | background: #FAFAFA; 130 | margin-left: 0; 131 | } 132 | 133 | .contents a:visited { 134 | color: #B34C0F; 135 | } 136 | 137 | a.qindexHL { 138 | background-color: #87877E; 139 | color: #ffffff; 140 | border: 1px double #787870; 141 | } 142 | 143 | .contents a.qindexHL:visited { 144 | color: #ffffff; 145 | } 146 | 147 | a { 148 | &.code, &.line, &.codeRef, &.lineRef { 149 | color: #B34C0F; 150 | &:visited { 151 | color: #B34C0F; 152 | } 153 | } 154 | } 155 | 156 | pre.fragment { 157 | border: 1px solid #B0B0A4; 158 | background-color: #FFFFEE; 159 | } 160 | 161 | div.fragment { 162 | background-color: #FFFFEE; 163 | border: 1px solid #B0B0A4; 164 | } 165 | 166 | span.lineno { 167 | border-right: 2px solid #0F0; 168 | background-color: #E8E8E8; 169 | a { 170 | background-color: #D8D8D8; 171 | &:hover { 172 | background-color: #C8C8C8; 173 | } 174 | } 175 | } 176 | 177 | td { 178 | &.indexkey, &.indexvalue { 179 | background-color: #FFFFEE; 180 | border: 1px solid #B0B0A4; 181 | } 182 | } 183 | 184 | tr.memlist { 185 | background-color: #EEF1F7; 186 | } 187 | 188 | span { 189 | &.keyword { 190 | color: #008000; 191 | } 192 | &.keywordtype { 193 | color: #604020; 194 | } 195 | &.keywordflow { 196 | color: #e08000; 197 | } 198 | &.comment { 199 | color: #800000; 200 | } 201 | &.preprocessor { 202 | color: #806020; 203 | } 204 | &.stringliteral { 205 | color: #002080; 206 | } 207 | &.charliteral { 208 | color: #008080; 209 | } 210 | &.vhdldigit { 211 | color: #ff00ff; 212 | } 213 | &.vhdlchar { 214 | color: #000000; 215 | } 216 | &.vhdlkeyword { 217 | color: #700070; 218 | } 219 | &.vhdllogic { 220 | color: #ff0000; 221 | } 222 | } 223 | 224 | blockquote { 225 | background-color: #FAFAE9; 226 | border-left: 2px solid #87877E; 227 | } 228 | 229 | .dirtab { 230 | border: 1px solid #696961; 231 | } 232 | 233 | th.dirtab { 234 | background: #FFFFEE; 235 | } 236 | 237 | hr { 238 | /*border-top: 1px solid #BF8323;*/ 239 | display: none; 240 | } 241 | 242 | .mdescLeft, .mdescRight, .memItemLeft, .memItemRight, .memTemplItemLeft, .memTemplItemRight, .memTemplParams { 243 | background-color: #FFFFEE; 244 | } 245 | 246 | .mdescLeft, .mdescRight { 247 | color: #555; 248 | } 249 | 250 | .memSeparator { 251 | border-bottom: 1px solid #E6E6D6; 252 | } 253 | 254 | .memTemplParams, .memtemplate { 255 | color: #B34C0F; 256 | } 257 | 258 | .memnav { 259 | background-color: #FFFFEE; 260 | border: 1px solid #696961; 261 | } 262 | 263 | .memproto, dl.reflist dt { 264 | border-top: 1px solid #A8A89D; 265 | border-left: 1px solid #A8A89D; 266 | border-right: 1px solid #A8A89D; 267 | color: #21211F; 268 | background-color: #E8E8D9; 269 | background-image: url('https://docs.milosolutions.com/img/nav_m.png'); 270 | } 271 | 272 | .memdoc, dl.reflist dd { 273 | border-bottom: 1px solid #A8A89D; 274 | border-left: 1px solid #A8A89D; 275 | border-right: 1px solid #A8A89D; 276 | background-color: #FFFFFF; 277 | } 278 | 279 | .paramname { 280 | color: #602020; 281 | } 282 | 283 | span.mlabel { 284 | background-color: #85857C; 285 | border-top: 1px solid #61615A; 286 | border-left: 1px solid #61615A; 287 | border-right: 1px solid #B0B0A4; 288 | border-bottom: 1px solid #B0B0A4; 289 | } 290 | 291 | div.directory { 292 | /*border-top: 1px solid #A8A89D;*/ 293 | /*border-bottom: 1px solid #A8A89D;*/ 294 | border: none; 295 | margin: 0 20px; 296 | width: calc(75% - 20px); 297 | float: right; 298 | } 299 | 300 | .directory { 301 | td.desc { 302 | border: none; 303 | } 304 | tr.even { 305 | /*background-color: #fcf5f1;*/ 306 | background-color: transparent; 307 | } 308 | .levels span { 309 | color: #C75411; 310 | } 311 | } 312 | 313 | address { 314 | color: #AAA; 315 | &.footer { 316 | text-align: center; 317 | padding-left: 12px; 318 | padding-top: 20px; 319 | padding-bottom: 20px; 320 | clear: both; 321 | a { 322 | text-decoration: none; 323 | img { 324 | width: 70px; 325 | } 326 | } 327 | } 328 | } 329 | 330 | table { 331 | &.doxtable { 332 | td { 333 | border: 1px solid #87390C; 334 | } 335 | th { 336 | border: 1px solid #87390C; 337 | background-color: #30302D; 338 | color: #FFFFFF; 339 | } 340 | a{ 341 | color:#ffcc00; 342 | &:hover{ 343 | color:#e3b705; 344 | } 345 | } 346 | } 347 | &.fieldtable { 348 | border: 1px solid #A8A89D; 349 | } 350 | } 351 | 352 | .fieldtable { 353 | td { 354 | &.fieldtype, &.fieldname { 355 | border-right: 1px solid #A8A89D; 356 | border-bottom: 1px solid #A8A89D; 357 | } 358 | &.fielddoc { 359 | border-bottom: 1px solid #A8A89D; 360 | } 361 | } 362 | th { 363 | background-image: url('https://docs.milosolutions.com/img/nav_m.png'); 364 | background-color: #E8E8D9; 365 | color: #21211F; 366 | border-bottom: 1px solid #A8A89D; 367 | } 368 | } 369 | 370 | .tabsearch { 371 | background: #444444; 372 | /*background-image: url('https://docs.milosolutions.com/img/tab_m.png');*/ 373 | } 374 | 375 | .navpath ul { 376 | color: #7D7D75; 377 | border: solid 1px #C2C2B6; 378 | background-image: url('https://docs.milosolutions.com/img/tab_m.png'); 379 | } 380 | 381 | /*custom list style dot*/ 382 | 383 | .textblock ul { 384 | list-style: none; 385 | padding: 0; 386 | margin: 0; 387 | li { 388 | padding-left: 1em; 389 | text-indent: -.7em; 390 | &:before { 391 | content: '\2022 \00a0'; 392 | color: #c75411; 393 | } 394 | } 395 | } 396 | 397 | /*////////////////////*/ 398 | 399 | .navpath li { 400 | color: #363632; 401 | background-image: url('bc_s.png'); 402 | &.navelem a { 403 | color: #262623; 404 | text-shadow: 0px 1px 1px rgba(29, 29, 27, 0.9); 405 | &:hover { 406 | color: #E36014; 407 | } 408 | } 409 | } 410 | 411 | div.header { 412 | /*background-image:url('https://docs.milosolutions.com/img/nav_hm.png');*/ 413 | background: none; 414 | border-bottom: none; 415 | } 416 | 417 | dl { 418 | &.note { 419 | border-color: #D0C000; 420 | } 421 | &.warning, &.attention { 422 | border-color: #FF0000; 423 | } 424 | &.pre, &.post, &.invariant { 425 | border-color: #00D000; 426 | } 427 | &.deprecated { 428 | border-color: #505050; 429 | } 430 | &.todo { 431 | border-color: #00C0E0; 432 | } 433 | &.test { 434 | border-color: #3030E0; 435 | } 436 | &.bug { 437 | border-color: #C08050; 438 | } 439 | } 440 | 441 | #titlearea { 442 | border: none; 443 | display: none; 444 | } 445 | 446 | div.zoom { 447 | border: 1px solid #96968C; 448 | } 449 | 450 | dl.citelist dt { 451 | color: #454540; 452 | } 453 | 454 | div.toc { 455 | background-color: #FFF; 456 | border: 1px solid #ddd; 457 | box-sizing: border-box; 458 | border-radius: 0; 459 | padding: 20px; 460 | margin: 0 20px 0 0; 461 | width: calc(25% - 20px); 462 | float: left; 463 | li { 464 | background: url("https://docs.milosolutions.com/img/goto.png") no-repeat scroll 0 5px transparent; 465 | font: 14px Open Sans, sans-serif; 466 | padding-top: 6px; 467 | padding-left: 20px; 468 | a { 469 | font-weight: 600; 470 | } 471 | } 472 | h3 { 473 | text-transform: uppercase; 474 | color: #000; 475 | font-size: 14px; 476 | font-family: "Open Sans", sans-serif; 477 | } 478 | } 479 | 480 | .inherit_header { 481 | color: gray; 482 | } 483 | 484 | #powerTip { 485 | div.ttdeci { 486 | color: #006318; 487 | } 488 | &.n:after, &.s:after, &.w:after, &.e:after, &.nw:after, &.ne:after, &.sw:after, &.se:after { 489 | border-color: rgba(255, 255, 255, 0); 490 | } 491 | &.n:before, &.s:before, &.w:before, &.e:before, &.nw:before, &.ne:before, &.sw:before, &.se:before { 492 | border-color: rgba(128, 128, 128, 0); 493 | } 494 | &.n:after, &.ne:after, &.nw:after { 495 | border-top-color: #ffffff; 496 | } 497 | &.n:before { 498 | border-top-color: #808080; 499 | } 500 | &.s:after, &.se:after, &.sw:after { 501 | border-bottom-color: #ffffff; 502 | } 503 | &.s:before, &.se:before, &.sw:before { 504 | border-bottom-color: #808080; 505 | border-width: 11px; 506 | margin: 0px -11px; 507 | } 508 | &.e { 509 | &:after { 510 | border-left-color: #ffffff; 511 | } 512 | &:before { 513 | border-left-color: #808080; 514 | } 515 | } 516 | &.w { 517 | &:after { 518 | border-right-color: #ffffff; 519 | } 520 | &:before { 521 | border-right-color: #808080; 522 | } 523 | } 524 | } 525 | 526 | .custom-submenu { 527 | padding-left: 0; 528 | position: absolute; 529 | li { 530 | clear: both; 531 | width: 200px; 532 | a span { 533 | color: #FFF; 534 | } 535 | &.current a span { 536 | color: #ffcc00; 537 | } 538 | } 539 | } 540 | 541 | #navrow1 .tablist .current { 542 | ul { 543 | display: none; 544 | } 545 | &:hover ul { 546 | display: block; 547 | } 548 | } 549 | 550 | #navrow3 { 551 | background: #e8e8e8; 552 | .tablist { 553 | a { 554 | background: #e8e8e8; 555 | color: #000; 556 | text-shadow: none; 557 | } 558 | li.current a { 559 | border-right: none; 560 | border-bottom: 3px solid #FF6F00; 561 | } 562 | } 563 | } 564 | 565 | div { 566 | &.qindex, &.navtab { 567 | background-color: #FFF; 568 | border: 1px solid #ddd; 569 | padding: 20px 0; 570 | color: #ddd; 571 | } 572 | } 573 | 574 | #navrow4 { 575 | background: #FFF; 576 | border: 1px solid #ddd; 577 | .tablist { 578 | a { 579 | background: #FFF; 580 | color: #000; 581 | text-shadow: none; 582 | } 583 | li.current a { 584 | border-right: none; 585 | border-bottom: 3px solid #FF6F00; 586 | } 587 | } 588 | } 589 | 590 | .directory { 591 | .levels { 592 | span { 593 | color: #4e4e4e; 594 | background: #f2f2f2; 595 | margin: 5px; 596 | padding: 2px 9px; 597 | border: 1px solid #ddd; 598 | border-radius: 4px; 599 | -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 1); 600 | -moz-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 1); 601 | box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 1); 602 | &:hover { 603 | background: #eaeaea; 604 | } 605 | } 606 | margin-top: 5px; 607 | } 608 | table { 609 | margin-top: 20px; 610 | } 611 | } 612 | 613 | .custom-contents { 614 | > div { 615 | width: 100%; 616 | } 617 | .directory { 618 | margin-left: 20px; 619 | } 620 | } 621 | .contents{ 622 | .image{ 623 | img{ 624 | width:100%; 625 | } 626 | } 627 | } 628 | 629 | @media screen and (min-width: 1200px) { 630 | .textblock { 631 | padding:20px 20% 20px 20px; 632 | text-align:justify; 633 | } 634 | } 635 | 636 | #titlearea{ 637 | background-color:#444444; 638 | display:block; 639 | border-bottom:solid 1px #000; 640 | } 641 | #titlearea tr{ 642 | color:#FFF; 643 | } 644 | #projectlogo{ 645 | vertical-align:middle; 646 | padding:0 25px; 647 | } 648 | #projectlogo img{ 649 | max-height:50px; 650 | } 651 | #projectname{ 652 | font-size:22px; 653 | font-weight:500; 654 | font-family:"Open Sans",sans-serif; 655 | } 656 | #projectbrief{ 657 | font-size:12px; 658 | font-family:"Open Sans",sans-serif; 659 | padding-bottom:6px; 660 | color:#CCC; 661 | } 662 | .contents .textblock *{ 663 | font-weight:inherit!important; 664 | } 665 | a.el { 666 | color: #B34C0F; 667 | } 668 | #top *{ 669 | font-weight:normal; 670 | } --------------------------------------------------------------------------------