[feature] Add netjsongraph static files #517

docs/developer/admin-theme.rst

@@ -286,3 +286,28 @@ Similarly, you can customize the HTML of the template by overriding the
 ``body`` block. See `email_template.html
 <https://github.com/openwisp/openwisp-utils/blob/master/openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html>`_
 for reference implementation.
+
+Shared Netjsongraph.js Assets
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+``openwisp-utils`` provides the unbundled ECharts variant of the
+`netjsongraph.js <https://github.com/netjson/netjsongraph.js>`_ library
+(and its base CSS themes) so it can be reused across different OpenWISP
+modules without redundantly bundling Leaflet JS (which is already shipped
+and loaded by django-leaflet).
+
+Other modules that use this library include monitoring (for the geographic
+and indoor map) and network-topology for the topology graph.
+
+See :doc:`/monitoring/geo-indoor-maps` and :doc:`/network-topology/index`
+for reference.
+
+These files are served via the ``openwisp_utils.admin_theme`` app. You can
+include them in other OpenWISP modules using the ``static`` template tag:
+
+.. code-block:: html+django
+
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'lib/netjsongraph/css/netjsongraph.css' %}">
+    <link rel="stylesheet" href="{% static 'lib/netjsongraph/css/netjsongraph-theme.css' %}">
+    <script src="{% static 'lib/netjsongraph/js/netjsongraph.echarts.min.js' %}"></script>

openwisp_utils/admin_theme/static/lib/netjsongraph/css/netjsongraph-theme.css

@@ -0,0 +1,89 @@
+.njg-container .leaflet-control-zoom-in,
+.njg-container .leaflet-control-zoom-out {
+  pointer-events: auto;
+  opacity: 1;
+  cursor: pointer;
+  background: rgba(217, 79, 52, 0.85) !important;
+  color: #fff !important;
+}
+
+.njg-container .leaflet-control-zoom-in.leaflet-disabled,
+.njg-container .leaflet-control-zoom-out.leaflet-disabled {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.njg-container .leaflet-control-layers {
+  background: rgba(217, 79, 52, 0.85) !important;
+  color: #fff !important;
+}
+
+.njg-container .switch-wrap {
+  color: #fff;
+}
+
+.njg-container .switch-wrap label {
+  border: 1px solid #dfdfdf;
+  background: #ffffff;
+}
+
+.njg-container .switch-wrap label::before {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
+  background-color: #fff;
+}
+
+.njg-container .switch-wrap input[type="checkbox"]:checked + label {
+  background: grey;
+}
+
+.njg-container .njg-date {
+  color: #fff;
+}
+
+.njg-container .njg-selectIcon {
+  background: rgba(217, 79, 52, 0.85);
+  color: #ffffff;
+}
+
+.njg-container .njg-searchBtn {
+  background-color: white;
+}
+
+.njg-container .njg-sideBar {
+  background-color: #fff;
+}
+
+.njg-container .sideBarHandle {
+  background: rgba(217, 79, 52, 0.85);
+}
+
+.njg-container .sideBarHandle::before {
+  color: #fff;
+}
+
+.njg-container .njg-metaData,
+.njg-container .njg-infoContainer {
+  background-color: inherit;
+}
+
+.njg-container .njg-tooltip {
+  background: #fff !important;
+  border: none !important;
+}
+
+.njg-container .njg-tooltip-key,
+.njg-container .njg-tooltip-value {
+  color: #000;
+}
+
+.njg-container .marker-cluster div {
+  color: #fff;
+  background-color: rgba(21, 102, 169, 0.8) !important;
+}
+
+@media only screen and (max-width: 850px) {
+  .njg-container .njg-sideBar {
+    background: rgba(255, 255, 255, 0.96);
+    color: #000;
+  }
+}