mirror of https://github.com/OCA/web.git
OCA-git-bot
commit
c1256a34b8
|
|
@ -1,2 +1,3 @@
|
|||
# generated from manifests external_dependencies
|
||||
bokeh==3.1.1
|
||||
plotly==5.13.1
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../../../web_widget_bokeh_chart
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import setuptools
|
||||
|
||||
setuptools.setup(
|
||||
setup_requires=['setuptools-odoo'],
|
||||
odoo_addon=True,
|
||||
)
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
======================
|
||||
Web Widget Bokeh Chart
|
||||
======================
|
||||
|
||||
.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
.. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
|
||||
:target: https://odoo-community.org/page/development-status
|
||||
:alt: Production/Stable
|
||||
.. |badge2| image:: https://img.shields.io/badge/licence-LGPL--3-blue.png
|
||||
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
|
||||
:alt: License: LGPL-3
|
||||
.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
|
||||
:target: https://github.com/OCA/web/tree/15.0/web_widget_bokeh_chart
|
||||
:alt: OCA/web
|
||||
.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
|
||||
:target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_bokeh_chart
|
||||
:alt: Translate me on Weblate
|
||||
.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
|
||||
:target: https://runbot.odoo-community.org/runbot/162/15.0
|
||||
:alt: Try me on Runbot
|
||||
|
||||
|badge1| |badge2| |badge3| |badge4| |badge5|
|
||||
|
||||
This module add the possibility to insert Bokeh charts into Odoo standard views.
|
||||
|
||||
.. image:: https://raw.githubusercontent.com/web_widget_bokeh_chart/static/description/example.png
|
||||
:alt: Bokeh Chart inserted into an Odoo view
|
||||
:width: 600 px
|
||||
|
||||
`Bokeh <https://bokeh.pydata.org>`__ is a Python interactive visualization
|
||||
library that targets modern web browsers for presentation. Its goal is to
|
||||
provide elegant, concise construction of basic exploratory and advanced
|
||||
custom graphics in the style of D3.js, but also deliver this capability with
|
||||
high-performance interactivity over very large or streaming datasets. Bokeh
|
||||
can help anyone who would like to quickly and easily create interactive
|
||||
plots, dashboards, and data applications.
|
||||
|
||||
If you want to see some samples of bokeh's capabilities follow this `link
|
||||
<https://bokeh.pydata.org/en/latest/docs/gallery.html>`_.
|
||||
|
||||
**Table of contents**
|
||||
|
||||
.. contents::
|
||||
:local:
|
||||
|
||||
Installation
|
||||
============
|
||||
|
||||
You need to install the python bokeh library::
|
||||
|
||||
pip3 install bokeh==2.4.2
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
To insert a Bokeh chart in a view proceed as follows:
|
||||
|
||||
#. Declare a text computed field like this::
|
||||
|
||||
bokeh_chart = fields.Text(
|
||||
string='Bokeh Chart',
|
||||
compute='_compute_bokeh_chart',
|
||||
)
|
||||
|
||||
#. At the top of the module add the following imports::
|
||||
|
||||
from bokeh.plotting import figure
|
||||
from bokeh.embed import components
|
||||
import json
|
||||
|
||||
#. In its computed method do::
|
||||
|
||||
def _compute_bokeh_chart(self):
|
||||
for rec in self:
|
||||
# Design your bokeh figure:
|
||||
p = figure()
|
||||
line = p.line([0, 2], [1, 8], line_width=5)
|
||||
# (...)
|
||||
# fill the record field with both markup and the script of a chart.
|
||||
script, div = components(p, wrap_script=False)
|
||||
rec.bokeh_chart = json.dumps({"div": div, "script": script})
|
||||
|
||||
#. In the view, add something like this wherever you want to display your
|
||||
bokeh chart::
|
||||
|
||||
<div>
|
||||
<field name="bokeh_chart" widget="bokeh_chart" nolabel="1"/>
|
||||
</div>
|
||||
|
||||
Bug Tracker
|
||||
===========
|
||||
|
||||
Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us smashing it by providing a detailed and welcomed
|
||||
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_bokeh_chart%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
|
||||
|
||||
Do not contact contributors directly about support or help with technical issues.
|
||||
|
||||
Credits
|
||||
=======
|
||||
|
||||
Authors
|
||||
~~~~~~~
|
||||
|
||||
* ForgeFlow
|
||||
|
||||
Contributors
|
||||
~~~~~~~~~~~~
|
||||
|
||||
* Jordi Ballester Alomar <jordi.ballester@forgeflow.com>
|
||||
* Lois Rilo Antelo <lois.rilo@forgeflow.com>
|
||||
* Artem Kostyuk <a.kostyuk@mobilunity.com>
|
||||
* Christopher Ormaza <chris.ormaza@forgeflow.com>
|
||||
|
||||
Other credits
|
||||
~~~~~~~~~~~~~
|
||||
|
||||
* This module uses the library `Bokeh <https://github.com/bokeh/bokeh>`__
|
||||
which is under the open-source BSD 3-clause "New" or "Revised" License.
|
||||
Copyright (c) 2012, Anaconda, Inc.
|
||||
* Odoo Community Association (OCA)
|
||||
|
||||
Maintainers
|
||||
~~~~~~~~~~~
|
||||
|
||||
This module is maintained by the OCA.
|
||||
|
||||
.. image:: https://odoo-community.org/logo.png
|
||||
:alt: Odoo Community Association
|
||||
:target: https://odoo-community.org
|
||||
|
||||
OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||
mission is to support the collaborative development of Odoo features and
|
||||
promote its widespread use.
|
||||
|
||||
.. |maintainer-LoisRForgeFlow| image:: https://github.com/LoisRForgeFlow.png?size=40px
|
||||
:target: https://github.com/LoisRForgeFlow
|
||||
:alt: LoisRForgeFlow
|
||||
.. |maintainer-ChrisOForgeFlow| image:: https://github.com/ChrisOForgeFlow.png?size=40px
|
||||
:target: https://github.com/ChrisOForgeFlow
|
||||
:alt: ChrisOForgeFlow
|
||||
|
||||
Current `maintainers <https://odoo-community.org/page/maintainer-role>`__:
|
||||
|
||||
|maintainer-LoisRForgeFlow| |maintainer-ChrisOForgeFlow|
|
||||
|
||||
This module is part of the `OCA/web <https://github.com/OCA/web/tree/15.0/web_widget_bokeh_chart>`_ project on GitHub.
|
||||
|
||||
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
|
||||
|
|
@ -0,0 +1 @@
|
|||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Copyright 2017 ForgeFlow S.L.
|
||||
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
|
||||
|
||||
{
|
||||
"name": "Web Widget Bokeh Chart",
|
||||
"category": "Hidden",
|
||||
"summary": "This widget allows to display charts using Bokeh library.",
|
||||
"author": "ForgeFlow, " "Odoo Community Association (OCA), " "Creu Blanca",
|
||||
"version": "16.0.1.0.0",
|
||||
"maintainers": ["LoisRForgeFlow", "ChrisOForgeFlow"],
|
||||
"development_status": "Production/Stable",
|
||||
"website": "https://github.com/OCA/web",
|
||||
"depends": ["web"],
|
||||
"data": [],
|
||||
"external_dependencies": {"python": ["bokeh==3.1.1"]},
|
||||
"auto_install": False,
|
||||
"license": "LGPL-3",
|
||||
"assets": {
|
||||
"web.assets_backend": [
|
||||
"web_widget_bokeh_chart/static/src/js/web_widget_bokeh_chart.esm.js",
|
||||
"web_widget_bokeh_chart/static/src/xml/bokeh.xml",
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Translation of Odoo Server.
|
||||
# This file contains the translation of the following modules:
|
||||
#
|
||||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Odoo Server 15.0\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"Last-Translator: \n"
|
||||
"Language-Team: \n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=UTF-8\n"
|
||||
"Content-Transfer-Encoding: \n"
|
||||
"Plural-Forms: \n"
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Translation of Odoo Server.
|
||||
# This file contains the translation of the following modules:
|
||||
#
|
||||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Odoo Server 12.0\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"Last-Translator: Automatically generated\n"
|
||||
"Language-Team: none\n"
|
||||
"Language: zh_CN\n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=UTF-8\n"
|
||||
"Content-Transfer-Encoding: \n"
|
||||
"Plural-Forms: nplurals=1; plural=0;\n"
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
* Jordi Ballester Alomar <jordi.ballester@forgeflow.com>
|
||||
* Lois Rilo Antelo <lois.rilo@forgeflow.com>
|
||||
* Artem Kostyuk <a.kostyuk@mobilunity.com>
|
||||
* Christopher Ormaza <chris.ormaza@forgeflow.com>
|
||||
* Enric Tobella <etobella@creublanca.es>
|
||||
* Oriol Miranda Garrido <oriol.miranda@forgeflow.com>
|
||||
* Bernat Puig Font <bernat.puig@forgeflow.com>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
* This module uses the library `Bokeh <https://github.com/bokeh/bokeh>`__
|
||||
which is under the open-source BSD 3-clause "New" or "Revised" License.
|
||||
Copyright (c) 2012, Anaconda, Inc.
|
||||
* Odoo Community Association (OCA)
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
This module add the possibility to insert Bokeh charts into Odoo standard views.
|
||||
|
||||
.. image:: /web_widget_bokeh_chart/static/description/example.png
|
||||
:alt: Bokeh Chart inserted into an Odoo view
|
||||
:width: 600 px
|
||||
|
||||
`Bokeh <https://bokeh.pydata.org>`__ is a Python interactive visualization
|
||||
library that targets modern web browsers for presentation. Its goal is to
|
||||
provide elegant, concise construction of basic exploratory and advanced
|
||||
custom graphics in the style of D3.js, but also deliver this capability with
|
||||
high-performance interactivity over very large or streaming datasets. Bokeh
|
||||
can help anyone who would like to quickly and easily create interactive
|
||||
plots, dashboards, and data applications.
|
||||
|
||||
If you want to see some samples of bokeh's capabilities follow this `link
|
||||
<https://bokeh.pydata.org/en/latest/docs/gallery.html>`_.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
You need to install the python bokeh library::
|
||||
|
||||
pip3 install bokeh==3.1.1
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
To insert a Bokeh chart in a view proceed as follows:
|
||||
|
||||
#. Declare a text computed field like this::
|
||||
|
||||
bokeh_chart = fields.Text(
|
||||
string='Bokeh Chart',
|
||||
compute='_compute_bokeh_chart',
|
||||
)
|
||||
|
||||
#. At the top of the module add the following imports::
|
||||
|
||||
from bokeh.plotting import figure
|
||||
from bokeh.embed import components
|
||||
import json
|
||||
|
||||
#. In its computed method do::
|
||||
|
||||
def _compute_bokeh_chart(self):
|
||||
for rec in self:
|
||||
# Design your bokeh figure:
|
||||
p = figure()
|
||||
line = p.line([0, 2], [1, 8], line_width=5)
|
||||
# (...)
|
||||
# fill the record field with both markup and the script of a chart.
|
||||
script, div = components(p, wrap_script=False)
|
||||
rec.bokeh_chart = json.dumps({"div": div, "script": script})
|
||||
|
||||
#. In the view, add something like this wherever you want to display your
|
||||
bokeh chart::
|
||||
|
||||
<div>
|
||||
<field name="bokeh_chart" widget="bokeh_chart" nolabel="1"/>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,494 @@
|
|||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
|
||||
<title>Web Widget Bokeh Chart</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
:Author: David Goodger (goodger@python.org)
|
||||
:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
|
||||
:Copyright: This stylesheet has been placed in the public domain.
|
||||
|
||||
Default cascading style sheet for the HTML output of Docutils.
|
||||
|
||||
See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
|
||||
customize this style sheet.
|
||||
*/
|
||||
|
||||
/* used to remove borders from tables and images */
|
||||
.borderless, table.borderless td, table.borderless th {
|
||||
border: 0 }
|
||||
|
||||
table.borderless td, table.borderless th {
|
||||
/* Override padding for "table.docutils td" with "! important".
|
||||
The right padding separates the table cells. */
|
||||
padding: 0 0.5em 0 0 ! important }
|
||||
|
||||
.first {
|
||||
/* Override more specific margin styles with "! important". */
|
||||
margin-top: 0 ! important }
|
||||
|
||||
.last, .with-subtitle {
|
||||
margin-bottom: 0 ! important }
|
||||
|
||||
.hidden {
|
||||
display: none }
|
||||
|
||||
.subscript {
|
||||
vertical-align: sub;
|
||||
font-size: smaller }
|
||||
|
||||
.superscript {
|
||||
vertical-align: super;
|
||||
font-size: smaller }
|
||||
|
||||
a.toc-backref {
|
||||
text-decoration: none ;
|
||||
color: black }
|
||||
|
||||
blockquote.epigraph {
|
||||
margin: 2em 5em ; }
|
||||
|
||||
dl.docutils dd {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Uncomment (and remove this text!) to get bold-faced definition list terms
|
||||
dl.docutils dt {
|
||||
font-weight: bold }
|
||||
*/
|
||||
|
||||
div.abstract {
|
||||
margin: 2em 5em }
|
||||
|
||||
div.abstract p.topic-title {
|
||||
font-weight: bold ;
|
||||
text-align: center }
|
||||
|
||||
div.admonition, div.attention, div.caution, div.danger, div.error,
|
||||
div.hint, div.important, div.note, div.tip, div.warning {
|
||||
margin: 2em ;
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.admonition p.admonition-title, div.hint p.admonition-title,
|
||||
div.important p.admonition-title, div.note p.admonition-title,
|
||||
div.tip p.admonition-title {
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
div.attention p.admonition-title, div.caution p.admonition-title,
|
||||
div.danger p.admonition-title, div.error p.admonition-title,
|
||||
div.warning p.admonition-title, .code .error {
|
||||
color: red ;
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
/* Uncomment (and remove this text!) to get reduced vertical space in
|
||||
compound paragraphs.
|
||||
div.compound .compound-first, div.compound .compound-middle {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
div.compound .compound-last, div.compound .compound-middle {
|
||||
margin-top: 0.5em }
|
||||
*/
|
||||
|
||||
div.dedication {
|
||||
margin: 2em 5em ;
|
||||
text-align: center ;
|
||||
font-style: italic }
|
||||
|
||||
div.dedication p.topic-title {
|
||||
font-weight: bold ;
|
||||
font-style: normal }
|
||||
|
||||
div.figure {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
div.footer, div.header {
|
||||
clear: both;
|
||||
font-size: smaller }
|
||||
|
||||
div.line-block {
|
||||
display: block ;
|
||||
margin-top: 1em ;
|
||||
margin-bottom: 1em }
|
||||
|
||||
div.line-block div.line-block {
|
||||
margin-top: 0 ;
|
||||
margin-bottom: 0 ;
|
||||
margin-left: 1.5em }
|
||||
|
||||
div.sidebar {
|
||||
margin: 0 0 0.5em 1em ;
|
||||
border: medium outset ;
|
||||
padding: 1em ;
|
||||
background-color: #ffffee ;
|
||||
width: 40% ;
|
||||
float: right ;
|
||||
clear: right }
|
||||
|
||||
div.sidebar p.rubric {
|
||||
font-family: sans-serif ;
|
||||
font-size: medium }
|
||||
|
||||
div.system-messages {
|
||||
margin: 5em }
|
||||
|
||||
div.system-messages h1 {
|
||||
color: red }
|
||||
|
||||
div.system-message {
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.system-message p.system-message-title {
|
||||
color: red ;
|
||||
font-weight: bold }
|
||||
|
||||
div.topic {
|
||||
margin: 2em }
|
||||
|
||||
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
|
||||
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
|
||||
margin-top: 0.4em }
|
||||
|
||||
h1.title {
|
||||
text-align: center }
|
||||
|
||||
h2.subtitle {
|
||||
text-align: center }
|
||||
|
||||
hr.docutils {
|
||||
width: 75% }
|
||||
|
||||
img.align-left, .figure.align-left, object.align-left, table.align-left {
|
||||
clear: left ;
|
||||
float: left ;
|
||||
margin-right: 1em }
|
||||
|
||||
img.align-right, .figure.align-right, object.align-right, table.align-right {
|
||||
clear: right ;
|
||||
float: right ;
|
||||
margin-left: 1em }
|
||||
|
||||
img.align-center, .figure.align-center, object.align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table.align-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left }
|
||||
|
||||
.align-center {
|
||||
clear: both ;
|
||||
text-align: center }
|
||||
|
||||
.align-right {
|
||||
text-align: right }
|
||||
|
||||
/* reset inner alignment in figures */
|
||||
div.align-right {
|
||||
text-align: inherit }
|
||||
|
||||
/* div.align-center * { */
|
||||
/* text-align: left } */
|
||||
|
||||
.align-top {
|
||||
vertical-align: top }
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle }
|
||||
|
||||
.align-bottom {
|
||||
vertical-align: bottom }
|
||||
|
||||
ol.simple, ul.simple {
|
||||
margin-bottom: 1em }
|
||||
|
||||
ol.arabic {
|
||||
list-style: decimal }
|
||||
|
||||
ol.loweralpha {
|
||||
list-style: lower-alpha }
|
||||
|
||||
ol.upperalpha {
|
||||
list-style: upper-alpha }
|
||||
|
||||
ol.lowerroman {
|
||||
list-style: lower-roman }
|
||||
|
||||
ol.upperroman {
|
||||
list-style: upper-roman }
|
||||
|
||||
p.attribution {
|
||||
text-align: right ;
|
||||
margin-left: 50% }
|
||||
|
||||
p.caption {
|
||||
font-style: italic }
|
||||
|
||||
p.credits {
|
||||
font-style: italic ;
|
||||
font-size: smaller }
|
||||
|
||||
p.label {
|
||||
white-space: nowrap }
|
||||
|
||||
p.rubric {
|
||||
font-weight: bold ;
|
||||
font-size: larger ;
|
||||
color: maroon ;
|
||||
text-align: center }
|
||||
|
||||
p.sidebar-title {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold ;
|
||||
font-size: larger }
|
||||
|
||||
p.sidebar-subtitle {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
p.topic-title {
|
||||
font-weight: bold }
|
||||
|
||||
pre.address {
|
||||
margin-bottom: 0 ;
|
||||
margin-top: 0 ;
|
||||
font: inherit }
|
||||
|
||||
pre.literal-block, pre.doctest-block, pre.math, pre.code {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
pre.code .ln { color: grey; } /* line numbers */
|
||||
pre.code, code { background-color: #eeeeee }
|
||||
pre.code .comment, code .comment { color: #5C6576 }
|
||||
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
|
||||
pre.code .literal.string, code .literal.string { color: #0C5404 }
|
||||
pre.code .name.builtin, code .name.builtin { color: #352B84 }
|
||||
pre.code .deleted, code .deleted { background-color: #DEB0A1}
|
||||
pre.code .inserted, code .inserted { background-color: #A3D289}
|
||||
|
||||
span.classifier {
|
||||
font-family: sans-serif ;
|
||||
font-style: oblique }
|
||||
|
||||
span.classifier-delimiter {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
span.interpreted {
|
||||
font-family: sans-serif }
|
||||
|
||||
span.option {
|
||||
white-space: nowrap }
|
||||
|
||||
span.pre {
|
||||
white-space: pre }
|
||||
|
||||
span.problematic {
|
||||
color: red }
|
||||
|
||||
span.section-subtitle {
|
||||
/* font-size relative to parent (h1..h6 element) */
|
||||
font-size: 80% }
|
||||
|
||||
table.citation {
|
||||
border-left: solid 1px gray;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docinfo {
|
||||
margin: 2em 4em }
|
||||
|
||||
table.docutils {
|
||||
margin-top: 0.5em ;
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
table.footnote {
|
||||
border-left: solid 1px black;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docutils td, table.docutils th,
|
||||
table.docinfo td, table.docinfo th {
|
||||
padding-left: 0.5em ;
|
||||
padding-right: 0.5em ;
|
||||
vertical-align: top }
|
||||
|
||||
table.docutils th.field-name, table.docinfo th.docinfo-name {
|
||||
font-weight: bold ;
|
||||
text-align: left ;
|
||||
white-space: nowrap ;
|
||||
padding-left: 0 }
|
||||
|
||||
/* "booktabs" style (no vertical lines) */
|
||||
table.docutils.booktabs {
|
||||
border: 0px;
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.docutils.booktabs * {
|
||||
border: 0px;
|
||||
}
|
||||
table.docutils.booktabs th {
|
||||
border-bottom: thin solid;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
|
||||
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
|
||||
font-size: 100% }
|
||||
|
||||
ul.auto-toc {
|
||||
list-style-type: none }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="document" id="web-widget-bokeh-chart">
|
||||
<h1 class="title">Web Widget Bokeh Chart</h1>
|
||||
|
||||
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_bokeh_chart"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_bokeh_chart"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/15.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
|
||||
<p>This module add the possibility to insert Bokeh charts into Odoo standard views.</p>
|
||||
<img alt="Bokeh Chart inserted into an Odoo view" src="https://raw.githubusercontent.com/web_widget_bokeh_chart/static/description/example.png" style="width: 600px;" />
|
||||
<p><a class="reference external" href="https://bokeh.pydata.org">Bokeh</a> is a Python interactive visualization
|
||||
library that targets modern web browsers for presentation. Its goal is to
|
||||
provide elegant, concise construction of basic exploratory and advanced
|
||||
custom graphics in the style of D3.js, but also deliver this capability with
|
||||
high-performance interactivity over very large or streaming datasets. Bokeh
|
||||
can help anyone who would like to quickly and easily create interactive
|
||||
plots, dashboards, and data applications.</p>
|
||||
<p>If you want to see some samples of bokeh’s capabilities follow this <a class="reference external" href="https://bokeh.pydata.org/en/latest/docs/gallery.html">link</a>.</p>
|
||||
<p><strong>Table of contents</strong></p>
|
||||
<div class="contents local topic" id="contents">
|
||||
<ul class="simple">
|
||||
<li><a class="reference internal" href="#installation" id="id1">Installation</a></li>
|
||||
<li><a class="reference internal" href="#usage" id="id2">Usage</a></li>
|
||||
<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
|
||||
<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
|
||||
<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
|
||||
<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
|
||||
<li><a class="reference internal" href="#other-credits" id="id7">Other credits</a></li>
|
||||
<li><a class="reference internal" href="#maintainers" id="id8">Maintainers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="installation">
|
||||
<h1><a class="toc-backref" href="#id1">Installation</a></h1>
|
||||
<p>You need to install the python bokeh library:</p>
|
||||
<pre class="literal-block">
|
||||
pip3 install bokeh==2.4.2
|
||||
</pre>
|
||||
</div>
|
||||
<div class="section" id="usage">
|
||||
<h1><a class="toc-backref" href="#id2">Usage</a></h1>
|
||||
<p>To insert a Bokeh chart in a view proceed as follows:</p>
|
||||
<ol class="arabic">
|
||||
<li><p class="first">Declare a text computed field like this:</p>
|
||||
<pre class="literal-block">
|
||||
bokeh_chart = fields.Text(
|
||||
string='Bokeh Chart',
|
||||
compute='_compute_bokeh_chart',
|
||||
)
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">At the top of the module add the following imports:</p>
|
||||
<pre class="literal-block">
|
||||
from bokeh.plotting import figure
|
||||
from bokeh.embed import components
|
||||
import json
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">In its computed method do:</p>
|
||||
<pre class="literal-block">
|
||||
def _compute_bokeh_chart(self):
|
||||
for rec in self:
|
||||
# Design your bokeh figure:
|
||||
p = figure()
|
||||
line = p.line([0, 2], [1, 8], line_width=5)
|
||||
# (...)
|
||||
# fill the record field with both markup and the script of a chart.
|
||||
script, div = components(p, wrap_script=False)
|
||||
rec.bokeh_chart = json.dumps({"div": div, "script": script})
|
||||
</pre>
|
||||
</li>
|
||||
<li><p class="first">In the view, add something like this wherever you want to display your
|
||||
bokeh chart:</p>
|
||||
<pre class="literal-block">
|
||||
<div>
|
||||
<field name="bokeh_chart" widget="bokeh_chart" nolabel="1"/>
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="section" id="bug-tracker">
|
||||
<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
|
||||
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us smashing it by providing a detailed and welcomed
|
||||
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_bokeh_chart%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
|
||||
<p>Do not contact contributors directly about support or help with technical issues.</p>
|
||||
</div>
|
||||
<div class="section" id="credits">
|
||||
<h1><a class="toc-backref" href="#id4">Credits</a></h1>
|
||||
<div class="section" id="authors">
|
||||
<h2><a class="toc-backref" href="#id5">Authors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>ForgeFlow</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="contributors">
|
||||
<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Jordi Ballester Alomar <<a class="reference external" href="mailto:jordi.ballester@forgeflow.com">jordi.ballester@forgeflow.com</a>></li>
|
||||
<li>Lois Rilo Antelo <<a class="reference external" href="mailto:lois.rilo@forgeflow.com">lois.rilo@forgeflow.com</a>></li>
|
||||
<li>Artem Kostyuk <<a class="reference external" href="mailto:a.kostyuk@mobilunity.com">a.kostyuk@mobilunity.com</a>></li>
|
||||
<li>Christopher Ormaza <<a class="reference external" href="mailto:chris.ormaza@forgeflow.com">chris.ormaza@forgeflow.com</a>></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="other-credits">
|
||||
<h2><a class="toc-backref" href="#id7">Other credits</a></h2>
|
||||
<ul class="simple">
|
||||
<li>This module uses the library <a class="reference external" href="https://github.com/bokeh/bokeh">Bokeh</a>
|
||||
which is under the open-source BSD 3-clause “New” or “Revised” License.
|
||||
Copyright (c) 2012, Anaconda, Inc.</li>
|
||||
<li>Odoo Community Association (OCA)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
<h2><a class="toc-backref" href="#id8">Maintainers</a></h2>
|
||||
<p>This module is maintained by the OCA.</p>
|
||||
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
|
||||
<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||
mission is to support the collaborative development of Odoo features and
|
||||
promote its widespread use.</p>
|
||||
<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</p>
|
||||
<p><a class="reference external" href="https://github.com/LoisRForgeFlow"><img alt="LoisRForgeFlow" src="https://github.com/LoisRForgeFlow.png?size=40px" /></a> <a class="reference external" href="https://github.com/ChrisOForgeFlow"><img alt="ChrisOForgeFlow" src="https://github.com/ChrisOForgeFlow.png?size=40px" /></a></p>
|
||||
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_bokeh_chart">OCA/web</a> project on GitHub.</p>
|
||||
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/** @odoo-module **/
|
||||
|
||||
import {CharField} from "@web/views/fields/char/char_field";
|
||||
import {registry} from "@web/core/registry";
|
||||
import {loadBundle} from "@web/core/assets";
|
||||
const {onWillStart, markup} = owl;
|
||||
class BokehChartWidget extends CharField {
|
||||
setup() {
|
||||
super.setup();
|
||||
onWillStart(() =>
|
||||
loadBundle({
|
||||
jsLibs: [
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-3.1.1.min.js",
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-api-3.1.1.min.js",
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-widgets-3.1.1.min.js",
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-tables-3.1.1.min.js",
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-mathjax-3.1.1.min.js",
|
||||
"/web_widget_bokeh_chart/static/src/lib/bokeh/bokeh-gl-3.1.1.min.js",
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
get json_value() {
|
||||
var value = JSON.parse(this.props.value);
|
||||
value.div = markup(value.div.trim());
|
||||
return value;
|
||||
}
|
||||
}
|
||||
BokehChartWidget.template = "web_widget_bokeh_chart.BokehChartField";
|
||||
registry.category("fields").add("bokeh_chart", BokehChartWidget);
|
||||
|
||||
export default BokehChartWidget;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="web_widget_bokeh_chart.BokehChartField" owl="1">
|
||||
<t t-out="json_value.div" />
|
||||
<script type="text/javascript" t-out="json_value.script" />
|
||||
</t>
|
||||
</templates>
|
||||
Loading…
Reference in New Issue