Bump Boosted to v5.3.3

Orange-OpenSource · Mar 12, 2024 · 8667faa · 8667faa
1 parent 38b7cfc
commit 8667faa
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 41 deletions.
diff --git a/docs/examples/bar-chart.html b/docs/examples/bar-chart.html
@@ -28,9 +28,9 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/docs/examples/bar-line-chart.html b/docs/examples/bar-line-chart.html
@@ -28,9 +28,9 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/docs/examples/index.html b/docs/examples/index.html
@@ -4,12 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Examples - ODS Charts</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.2.3/dist/css/boosted.min.css"
-      rel="stylesheet"
-      integrity="sha384-zYFw+mxKy6r9zpAc1NoGiYBfQmxfvg7ONEMr81WeU+WLPPaLC9QTrNGFJTBi3EIn"
-      crossorigin="anonymous"
-    />
+
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
+
     <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180">
     <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
     <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
@@ -25,9 +23,9 @@
     </script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/docs/examples/index.js b/docs/examples/index.js
@@ -3,15 +3,17 @@ import 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js';
 var themeElements = {
   BOOSTED5: {
     css: [
-      'https://cdn.jsdelivr.net/npm/boosted@5.3.2/dist/css/boosted.min.css',
+      'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css',
+      'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css',
     ],
     script: [
       'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js',
-      'https://cdn.jsdelivr.net/npm/boosted@5.3.2/dist/js/boosted.min.js',
+      'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/js/boosted.min.js',
     ],
   },
   BOOSTED4: {
     css: [
+      'https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css',
       'https://cdn.jsdelivr.net/npm/boosted@4.6.2/dist/css/boosted.min.css',
     ],
     script: [
@@ -97,7 +99,7 @@ function generateConfigurator(id, cssThemeName) {
           itemId
         ) => `<div class="card-header" role="tab" id="${itemId}">
       <h5 class="mb-0">
-        <a class="collapsed" data-toggle="collapse" data-parent="#${id}" href="#collapse_${itemId}" role="button" 
+        <a class="collapsed" data-toggle="collapse" href="#collapse_${itemId}" role="button" 
         aria-expanded="false" aria-controls="collapse_${itemId}">
 `,
         end: (id, itemId) => `</a>
@@ -108,7 +110,7 @@ function generateConfigurator(id, cssThemeName) {
         begin: (
           id,
           itemId
-        ) => `<div id="collapse_${itemId}" class="collapse" role="tabpanel" aria-labelledby="${itemId}">
+        ) => `<div id="collapse_${itemId}" class="collapse" role="tabpanel" data-parent="#${id}" aria-labelledby="${itemId}">
       <div class="card-body" id="body_${itemId}">`,
         end: (id, itemId) => `</div>
         </div>`,
@@ -151,14 +153,14 @@ function generateConfigurator(id, cssThemeName) {
           <form class="row g-3">
             <div class="col-md-4">
               <label for="darkModeInput" class="form-label">Dark mode</label>
-              <select class="form-select" aria-label="Dark mode" id="darkModeInput" onchange="changeTheme('${id}')">
+              <select class="form-select custom-select" aria-label="Dark mode" id="darkModeInput" onchange="changeTheme('${id}')">
                 <option value="light" >White mode</option>
                 <option value="dark">Dark mode</option>
               </select>
             </div>
             <div class="col-md-4">
               <label for="colorSetInput" class="form-label">Categorical Color</label>
-              <select class="form-select" aria-label="Color set" id="colorSetInput" onchange="changeTheme('${id}')">
+              <select class="form-select custom-select" aria-label="Color set" id="colorSetInput" onchange="changeTheme('${id}')">
                 <option value="${
                   ODSCharts.ODSChartsCategoricalColorsSet
                     .DEFAULT_SUPPORTING_COLORS
@@ -183,7 +185,7 @@ function generateConfigurator(id, cssThemeName) {
 
             <div class="col-md-4">
                 <label for="visualMapColorInput" class="form-label">visual Map Color</label>
-                <select class="form-select" aria-label="visual Map Color" id="visualMapColorInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="visual Map Color" id="visualMapColorInput" onchange="changeTheme('${id}')">
                     <option value="blue" >Blue</option>
                     <option value="green" >Green</option>
                     <option value="purple" >Purple</option>
@@ -193,7 +195,7 @@ function generateConfigurator(id, cssThemeName) {
             
             <div class="col-md-4">
                 <label for="lineStyleInput" class="form-label">Line style</label>
-                <select class="form-select" aria-label="Line style" id="lineStyleInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="Line style" id="lineStyleInput" onchange="changeTheme('${id}')">
                     <option value="smooth" >Smooth</option>
                     <option value="broken" >Broken</option>
                     <option value="withPoints" >Broken with points</option>
@@ -210,7 +212,7 @@ function generateConfigurator(id, cssThemeName) {
 
             <div class="col-md-4">
                 <label for="popoverInput" class="form-label">Popover or Tooltip</label>
-                <select class="form-select" aria-label="Line style" id="popoverInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="Line style" id="popoverInput" onchange="changeTheme('${id}')">
                     <option value="none" >None</option>
                     <option value="popover" >Popover</option>
                     <option value="tooltip" >Tooltip</option>
@@ -219,15 +221,15 @@ function generateConfigurator(id, cssThemeName) {
 
             <div class="col-md-4 popover-config">
                 <label for="popoverSharedInput" class="form-label">Tooltip/Popover content</label>
-                <select class="form-select" aria-label="Line style" id="popoverSharedInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="Line style" id="popoverSharedInput" onchange="changeTheme('${id}')">
                     <option value="none" >Not shared</option>
                     <option value="shared" >Shared</option>
                 </select>
             </div>
 
             <div class="col-md-4 popover-config">
                 <label for="popoverAxisInput" class="form-label">Tooltip/Popover axis pointer</label>
-                <select class="form-select" aria-label="Line style" id="popoverAxisInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="Line style" id="popoverAxisInput" onchange="changeTheme('${id}')">
                     <option value="none" >None</option>
                     <option value="shadow" >Shadow</option>
                     <option value="line" >Line</option>
@@ -237,7 +239,7 @@ function generateConfigurator(id, cssThemeName) {
 
             <div class="col-md-4 popover-renderer">
                 <label for="popoverTemplateInput" class="form-label">Popover renderer</label>
-                <select class="form-select" aria-label="Line style" id="popoverTemplateInput" onchange="changeTheme('${id}')">
+                <select class="form-select custom-select" aria-label="Line style" id="popoverTemplateInput" onchange="changeTheme('${id}')">
                     <option value="internal" >Chartjs renderer</option>
                     <option value="external" >Boosted renderer</option>
                 </select>
@@ -248,7 +250,7 @@ function generateConfigurator(id, cssThemeName) {
             </div>
             <div class="col-md-4">
                 <label for="cssTheme" class="form-label">Used CSS</label>
-                <select class="form-select" aria-label="Line style" id="cssTheme" onchange="changeCssTheme(this.value)">
+                <select class="form-select custom-select" aria-label="Line style" id="cssTheme" onchange="changeCssTheme(this.value)">
                     <option value="NONE" >NONE</option>
                     <option value="BOOSTED4" >Boosted 4</option>
                     <option value="BOOSTED5" >Boosted 5</option>

diff --git a/docs/examples/multiple-line-chart.html b/docs/examples/multiple-line-chart.html
@@ -28,13 +28,13 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
         class="navbar navbar-dark bg-dark navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">
-          <div class="navbar-brand me-auto me-lg-4">
+          <div class="navbar-brand me-auto me-lg-4 align-items-end">
             <a class="stretched-link" href="./">
               <img
                 src="../images/orange-logo.svg"
@@ -44,7 +44,7 @@
                 loading="lazy"
               />
             </a>
-            <h1 class="title">Multiple Line Charts example</h1>
+            <h1 class="title ml-3 mb-0">Multiple Line Charts example</h1>
           </div>
         </div>
       </nav>

diff --git a/docs/examples/single-line-chart.html b/docs/examples/single-line-chart.html
@@ -28,9 +28,9 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/docs/examples/stacked-bar-chart.html b/docs/examples/stacked-bar-chart.html
@@ -28,9 +28,9 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/docs/index.html b/docs/index.html
@@ -4,12 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>ODS Charts</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/boosted@5.2.3/dist/css/boosted.min.css"
-      rel="stylesheet"
-      integrity="sha384-zYFw+mxKy6r9zpAc1NoGiYBfQmxfvg7ONEMr81WeU+WLPPaLC9QTrNGFJTBi3EIn"
-      crossorigin="anonymous"
-    />
+
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
+
     <link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png" sizes="180x180">
     <link rel="icon" href="images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
     <link rel="icon" href="images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
@@ -25,9 +23,9 @@
     </script>
   </head>
   <body>
-    <header>
+    <header data-bs-theme="dark">
       <nav
-        class="navbar navbar-dark bg-dark navbar-expand-lg"
+        class="navbar navbar-expand-lg"
         aria-label="Global navigation - With one line title example"
       >
         <div class="container-xxl">

diff --git a/src/theme/popover/ods-chart-popover-definitions.ts b/src/theme/popover/ods-chart-popover-definitions.ts
@@ -198,7 +198,6 @@ class BOOSTED4_Definition extends ODSChartsPopoverDefinition {
       container: 'body',
       title: title,
       content: htmlContent,
-      customClass: 'pe-none',
     });
     elt.chart = popover;