Add oca-web submodule with 68 web modules

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ernad Husremovic 2025-08-30 17:27:15 +02:00
parent af56672c08
commit 53fddf87c8
2469 changed files with 101716 additions and 0 deletions

View file

@ -0,0 +1,46 @@
# Web Widget Bokeh Chart
Odoo addon: web_widget_bokeh_chart
## Installation
```bash
pip install odoo-bringout-oca-web-web_widget_bokeh_chart
```
## Dependencies
This addon depends on:
- web
## Manifest Information
- **Name**: Web Widget Bokeh Chart
- **Version**: 16.0.1.1.0
- **Category**: Hidden
- **License**: LGPL-3
- **Installable**: False
## Source
Based on [OCA/web](https://github.com/OCA/web) branch 16.0, addon `web_widget_bokeh_chart`.
## License
This package maintains the original LGPL-3 license from the upstream Odoo project.
## Documentation
- Overview: doc/OVERVIEW.md
- Architecture: doc/ARCHITECTURE.md
- Models: doc/MODELS.md
- Controllers: doc/CONTROLLERS.md
- Wizards: doc/WIZARDS.md
- Reports: doc/REPORTS.md
- Security: doc/SECURITY.md
- Install: doc/INSTALL.md
- Usage: doc/USAGE.md
- Configuration: doc/CONFIGURATION.md
- Dependencies: doc/DEPENDENCIES.md
- Troubleshooting: doc/TROUBLESHOOTING.md
- FAQ: doc/FAQ.md

View file

@ -0,0 +1,32 @@
# Architecture
```mermaid
flowchart TD
U[Users] -->|HTTP| V[Views and QWeb Templates]
V --> C[Controllers]
V --> W[Wizards Transient Models]
C --> M[Models and ORM]
W --> M
M --> R[Reports]
DX[Data XML] --> M
S[Security ACLs and Groups] -. enforces .-> M
subgraph Web_widget_bokeh_chart Module - web_widget_bokeh_chart
direction LR
M:::layer
W:::layer
C:::layer
V:::layer
R:::layer
S:::layer
DX:::layer
end
classDef layer fill:#eef8ff,stroke:#6ea8fe,stroke-width:1px
```
Notes
- Views include tree/form/kanban templates and report templates.
- Controllers provide website/portal routes when present.
- Wizards are UI flows implemented with `models.TransientModel`.
- Data XML loads data/demo records; Security defines groups and access.

View file

@ -0,0 +1,3 @@
# Configuration
Refer to Odoo settings for web_widget_bokeh_chart. Configure related models, access rights, and options as needed.

View file

@ -0,0 +1,3 @@
# Controllers
This module does not define custom HTTP controllers.

View file

@ -0,0 +1,5 @@
# Dependencies
This addon depends on:
- [web](https://github.com/bringout/oca-ocb-core/tree/b3e6fb998e53b9eb1bc9669d992017616c2bd7b3/odoo-bringout-oca-ocb-web)

View file

@ -0,0 +1,4 @@
# FAQ
- Q: Which Odoo version? A: 16.0 (OCA/OCB packaged).
- Q: How to enable? A: Start server with --addon web_widget_bokeh_chart or install in UI.

View file

@ -0,0 +1,7 @@
# Install
```bash
pip install odoo-bringout-oca-web-web_widget_bokeh_chart"
# or
uv pip install odoo-bringout-oca-web-web_widget_bokeh_chart"
```

View file

@ -0,0 +1,11 @@
# Models
Detected core models and extensions in web_widget_bokeh_chart.
```mermaid
classDiagram
```
Notes
- Classes show model technical names; fields omitted for brevity.
- Items listed under _inherit are extensions of existing models.

View file

@ -0,0 +1,6 @@
# Overview
Packaged Odoo addon: web_widget_bokeh_chart. Provides features documented in upstream Odoo 16 under this addon.
- Source: OCA/OCB 16.0, addon web_widget_bokeh_chart
- License: LGPL-3

View file

@ -0,0 +1,3 @@
# Reports
This module does not define custom reports.

View file

@ -0,0 +1,8 @@
# Security
This module does not define custom security rules or access controls beyond Odoo defaults.
Default Odoo security applies:
- Base user access through standard groups
- Model access inherited from dependencies
- No custom row-level security rules

View file

@ -0,0 +1,5 @@
# Troubleshooting
- Ensure Python and Odoo environment matches repo guidance.
- Check database connectivity and logs if startup fails.
- Validate that dependent addons listed in DEPENDENCIES.md are installed.

View file

@ -0,0 +1,7 @@
# Usage
Start Odoo including this addon (from repo root):
```bash
python3 scripts/nix_odoo_web_server.py --db-name mydb --addon web_widget_bokeh_chart
```

View file

@ -0,0 +1,3 @@
# Wizards
This module does not include UI wizards.

View file

@ -0,0 +1,42 @@
[project]
name = "odoo-bringout-oca-web-web_widget_bokeh_chart"
version = "16.0.0"
description = "Web Widget Bokeh Chart - This widget allows to display charts using Bokeh library."
authors = [
{ name = "Ernad Husremovic", email = "hernad@bring.out.ba" }
]
dependencies = [
"odoo-bringout-oca-ocb-web>=16.0.0",
"requests>=2.25.1"
]
readme = "README.md"
requires-python = ">= 3.11"
classifiers = [
"Development Status :: 5 - Production/Stable",
"Intended Audience :: Developers",
"License :: OSI Approved :: GNU Lesser General Public License v3 (LGPLv3)",
"Programming Language :: Python :: 3",
"Programming Language :: Python :: 3.11",
"Programming Language :: Python :: 3.12",
"Topic :: Office/Business",
]
[project.urls]
homepage = "https://github.com/bringout/0"
repository = "https://github.com/bringout/0"
[build-system]
requires = ["hatchling"]
build-backend = "hatchling.build"
[tool.hatch.metadata]
allow-direct-references = true
[tool.hatch.build.targets.wheel]
packages = ["web_widget_bokeh_chart"]
[tool.rye]
managed = true
dev-dependencies = [
"pytest>=8.4.1",
]

View file

@ -0,0 +1,203 @@
======================
Web Widget Bokeh Chart
======================
..
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:3ec86c20df03bbfbb52f5eaa52fb1be16d4fe3ec0f1756f745ad65eb7cc56b66
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.. |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/16.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-16-0/web-16-0-web_widget_bokeh_chart
:alt: Translate me on Weblate
.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
:target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0
:alt: Try me on Runboat
|badge1| |badge2| |badge3| |badge4| |badge5|
This module add the possibility to insert Bokeh charts into Odoo standard views.
.. image:: https://raw.githubusercontent.com/OCA/web/16.0/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==3.1.1
Usage
=====
To insert a Bokeh chart in a view proceed as follows:
Using a Char field
~~~~~~~~~~~~~~~~~~
#. 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>
Using a Json field
~~~~~~~~~~~~~~~~~~
#. Declare a json computed field like this::
bokeh_chart = fields.Json(
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
#. 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 = {"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_json
Known issues / Roadmap
======================
#. On 17, we could remove the char field and only use the Json Field
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 to smash it by providing a detailed and welcomed
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_bokeh_chart%0Aversion:%2016.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
* Creu Blanca
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>
* Enric Tobella <etobella@creublanca.es>
* Oriol Miranda Garrido <oriol.miranda@forgeflow.com>
* Bernat Puig Font <bernat.puig@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/16.0/web_widget_bokeh_chart>`_ project on GitHub.
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

View file

@ -0,0 +1 @@
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).

View file

@ -0,0 +1,25 @@
# 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.1.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/js/web_widget_bokeh_json_chart.esm.js",
"web_widget_bokeh_chart/static/src/xml/bokeh.xml",
],
},
}

View file

@ -0,0 +1,14 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 16.0\n"
"Report-Msgid-Bugs-To: \n"
"Last-Translator: Automatically generated\n"
"Language-Team: none\n"
"Language: it\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: nplurals=2; plural=n != 1;\n"

View file

@ -0,0 +1,13 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 16.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"

View file

@ -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>

View file

@ -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)

View file

@ -0,0 +1,16 @@
This module add the possibility to insert Bokeh charts into Odoo standard views.
.. image:: ../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>`_.

View file

@ -0,0 +1,3 @@
You need to install the python bokeh library::
pip3 install bokeh==3.1.1

View file

@ -0,0 +1 @@
#. On 17, we could remove the char field and only use the Json Field

View file

@ -0,0 +1,70 @@
To insert a Bokeh chart in a view proceed as follows:
Using a Char field
~~~~~~~~~~~~~~~~~~
#. 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>
Using a Json field
~~~~~~~~~~~~~~~~~~
#. Declare a json computed field like this::
bokeh_chart = fields.Json(
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
#. 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 = {"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_json

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,553 @@
<?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: https://docutils.sourceforge.io/" />
<title>Web Widget Bokeh Chart</title>
<style type="text/css">
/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
See https://docutils.sourceforge.io/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. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:3ec86c20df03bbfbb52f5eaa52fb1be16d4fe3ec0f1756f745ad65eb7cc56b66
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<p><a class="reference external image-reference" 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 image-reference" 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 image-reference" href="https://github.com/OCA/web/tree/16.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 image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-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 image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-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/OCA/web/16.0/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 bokehs 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="toc-entry-1">Installation</a></li>
<li><a class="reference internal" href="#usage" id="toc-entry-2">Usage</a><ul>
<li><a class="reference internal" href="#using-a-char-field" id="toc-entry-3">Using a Char field</a></li>
<li><a class="reference internal" href="#using-a-json-field" id="toc-entry-4">Using a Json field</a></li>
</ul>
</li>
<li><a class="reference internal" href="#known-issues-roadmap" id="toc-entry-5">Known issues / Roadmap</a></li>
<li><a class="reference internal" href="#bug-tracker" id="toc-entry-6">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="toc-entry-7">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="toc-entry-8">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="toc-entry-9">Contributors</a></li>
<li><a class="reference internal" href="#other-credits" id="toc-entry-10">Other credits</a></li>
<li><a class="reference internal" href="#maintainers" id="toc-entry-11">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<div class="section" id="installation">
<h1><a class="toc-backref" href="#toc-entry-1">Installation</a></h1>
<p>You need to install the python bokeh library:</p>
<pre class="literal-block">
pip3 install bokeh==3.1.1
</pre>
</div>
<div class="section" id="usage">
<h1><a class="toc-backref" href="#toc-entry-2">Usage</a></h1>
<p>To insert a Bokeh chart in a view proceed as follows:</p>
<div class="section" id="using-a-char-field">
<h2><a class="toc-backref" href="#toc-entry-3">Using a Char field</a></h2>
<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({&quot;div&quot;: div, &quot;script&quot;: 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">
&lt;div&gt;
&lt;field name=&quot;bokeh_chart&quot; widget=&quot;bokeh_chart&quot; nolabel=&quot;1&quot;/&gt;
&lt;/div&gt;
</pre>
</li>
</ol>
</div>
<div class="section" id="using-a-json-field">
<h2><a class="toc-backref" href="#toc-entry-4">Using a Json field</a></h2>
<ol class="arabic">
<li><p class="first">Declare a json computed field like this:</p>
<pre class="literal-block">
bokeh_chart = fields.Json(
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
</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 = {&quot;div&quot;: div, &quot;script&quot;: 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">
&lt;div&gt;
&lt;field name=&quot;bokeh_chart&quot; widget=&quot;bokeh_chart_json
</pre>
</li>
</ol>
</div>
</div>
<div class="section" id="known-issues-roadmap">
<h1><a class="toc-backref" href="#toc-entry-5">Known issues / Roadmap</a></h1>
<ol class="arabic simple">
<li>On 17, we could remove the char field and only use the Json Field</li>
</ol>
</div>
<div class="section" id="bug-tracker">
<h1><a class="toc-backref" href="#toc-entry-6">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 to smash 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:%2016.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="#toc-entry-7">Credits</a></h1>
<div class="section" id="authors">
<h2><a class="toc-backref" href="#toc-entry-8">Authors</a></h2>
<ul class="simple">
<li>ForgeFlow</li>
<li>Creu Blanca</li>
</ul>
</div>
<div class="section" id="contributors">
<h2><a class="toc-backref" href="#toc-entry-9">Contributors</a></h2>
<ul class="simple">
<li>Jordi Ballester Alomar &lt;<a class="reference external" href="mailto:jordi.ballester&#64;forgeflow.com">jordi.ballester&#64;forgeflow.com</a>&gt;</li>
<li>Lois Rilo Antelo &lt;<a class="reference external" href="mailto:lois.rilo&#64;forgeflow.com">lois.rilo&#64;forgeflow.com</a>&gt;</li>
<li>Artem Kostyuk &lt;<a class="reference external" href="mailto:a.kostyuk&#64;mobilunity.com">a.kostyuk&#64;mobilunity.com</a>&gt;</li>
<li>Christopher Ormaza &lt;<a class="reference external" href="mailto:chris.ormaza&#64;forgeflow.com">chris.ormaza&#64;forgeflow.com</a>&gt;</li>
<li>Enric Tobella &lt;<a class="reference external" href="mailto:etobella&#64;creublanca.es">etobella&#64;creublanca.es</a>&gt;</li>
<li>Oriol Miranda Garrido &lt;<a class="reference external" href="mailto:oriol.miranda&#64;forgeflow.com">oriol.miranda&#64;forgeflow.com</a>&gt;</li>
<li>Bernat Puig Font &lt;<a class="reference external" href="mailto:bernat.puig&#64;forgeflow.com">bernat.puig&#64;forgeflow.com</a>&gt;</li>
</ul>
</div>
<div class="section" id="other-credits">
<h2><a class="toc-backref" href="#toc-entry-10">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="#toc-entry-11">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 image-reference" href="https://github.com/LoisRForgeFlow"><img alt="LoisRForgeFlow" src="https://github.com/LoisRForgeFlow.png?size=40px" /></a> <a class="reference external image-reference" 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/16.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>

View file

@ -0,0 +1,44 @@
/** @odoo-module **/
import {CharField} from "@web/views/fields/char/char_field";
import {loadBundle} from "@web/core/assets";
import {registry} from "@web/core/registry";
const {onWillStart, markup, onMounted, onPatched, useRef} = owl;
export default class BokehChartWidget extends CharField {
setup() {
this.widget = useRef("widget");
onPatched(() => {
var script = document.createElement("script");
script.text = this.json_value.script;
this.widget.el.append(script);
});
onMounted(() => {
var script = document.createElement("script");
script.text = this.json_value.script;
this.widget.el.append(script);
});
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);
if (value) {
value.div = markup(value.div.trim());
}
return value;
}
}
BokehChartWidget.template = "web_widget_bokeh_chart.BokehChartField";
registry.category("fields").add("bokeh_chart", BokehChartWidget);

View file

@ -0,0 +1,40 @@
/** @odoo-module **/
import {loadBundle} from "@web/core/assets";
import {registry} from "@web/core/registry";
const {onWillStart, markup, Component, onMounted, onPatched, useRef} = owl;
export default class BokehChartJsonWidget extends Component {
setup() {
this.widget = useRef("widget");
onPatched(() => {
var script = document.createElement("script");
script.text = this.props.value.script;
this.widget.el.append(script);
});
onMounted(() => {
var script = document.createElement("script");
script.text = this.props.value.script;
this.widget.el.append(script);
});
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",
],
})
);
}
markup(value) {
console.log("Marking up...");
return markup(value);
}
}
BokehChartJsonWidget.template = "web_widget_bokeh_chart.BokehChartlJsonField";
registry.category("fields").add("bokeh_chart_json", BokehChartJsonWidget);

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<div t-ref="widget" t-name="web_widget_bokeh_chart.BokehChartField" owl="1">
<t t-out="json_value.div" />
</div>
<div t-ref="widget" t-name="web_widget_bokeh_chart.BokehChartlJsonField" owl="1">
<t t-out="markup(props.value.div)" />
</div>
</templates>