carbon-design-system · ocornec · Nov 26, 2024 · Nov 27, 2024 · Nov 27, 2024 · Dec 2, 2024
@@ -14,7 +14,10 @@
 # Other packages
 /packages/react/src/components/AnimatedHeader/   @carbon-design-system/animated-header-devs
 /packages/react/src/components/Processing/       @carbon-design-system/processing-devs
+<<<<<<< Updated upstream
 /packages/react/src/components/SplitPanel/       @carbon-design-system/split-panel-devs
+=======
+>>>>>>> Stashed changes
 /packages/react/src/components/TextHighlighter/  @carbon-design-system/text-highlighter-devs
 /packages/react/src/components/ThemeSettings/    @carbon-design-system/theme-settings-devs
 

@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
+@include type.type-style('productive-heading-07');
 
 .welcome__container {
   position: fixed;
@@ -13,7 +14,6 @@
 }
 
 .welcome__heading {
-  @include type.type-style('productive-heading-07');
   color: colors.$gray-80;
 }
 

@@ -248,6 +248,15 @@ export const Showcase = {
       container-height="400px">
     </clabs-chat-chart>
     <br />
+    <h4>Candle stick chart</h4>
+    <br />
+    <clabs-chat-chart
+      theme="${chartTheme}"
+      content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":400,"description":"A candlestick chart","data":{"url":"https://vega.github.io/vega-lite/examples/data/ohlc.json"},"encoding":{"x":{"field":"date","type":"temporal","title":"Date in 2009","axis":{"format":"%m/%d","labelAngle":-45,"title":"Date in 2009"}},"y":{"type":"quantitative","scale":{"zero":false},"axis":{"title":"Price"}},"color":{"condition":{"test":"datum.open < datum.close","value":"#24a148"},"value":"#fa4d56"}},"layer":[{"mark":"rule","encoding":{"y":{"field":"low"},"y2":{"field":"high"}}},{"mark":"bar","encoding":{"y":{"field":"open"},"y2":{"field":"close"}}}]}'}"
+      container-height="350px">
+    </clabs-chat-chart>
+    <br />
+    <br />
     <h4>Line Chart</h4>
     <br />
     <clabs-chat-chart
@@ -323,11 +332,12 @@ export const Showcase = {
       container-height="500px">
     </clabs-chat-chart>
     <br />
-    <h4>Orthographic world map</h4>
+    <br />
+    <h4>Radar Plot</h4>
     <br />
     <clabs-chat-chart
       theme="${chartTheme}"
-      content="${'{"$schema": "https://vega.github.io/schema/vega-lite/v5.json","width": 500,"height": 300,"params": [{"name": "projection","value": "orthographic"}],"data": {"url": "https://vega.github.io/vega-lite/examples/data/world-110m.json","format": {"type": "topojson", "feature": "countries"}},"projection": {"type": {"expr": "projection"}},"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "gray"}}'}"
+      content="${'{"$schema":"https://vega.github.io/schema/vega/v5.json","description":"A radar chart example, showing multiple dimensions in a radial layout.","width":400,"height":400,"padding":40,"autosize":{"type":"none","contains":"padding"},"signals":[{"name":"radius","update":"width / 2"}],"data":[{"name":"table","values":[{"key":"key-0","value":19,"category":0},{"key":"key-1","value":22,"category":0},{"key":"key-2","value":14,"category":0},{"key":"key-3","value":38,"category":0},{"key":"key-4","value":23,"category":0},{"key":"key-5","value":5,"category":0},{"key":"key-6","value":27,"category":0},{"key":"key-0","value":13,"category":1},{"key":"key-1","value":12,"category":1},{"key":"key-2","value":42,"category":1},{"key":"key-3","value":13,"category":1},{"key":"key-4","value":6,"category":1},{"key":"key-5","value":15,"category":1},{"key":"key-6","value":8,"category":1}]},{"name":"keys","source":"table","transform":[{"type":"aggregate","groupby":["key"]}]}],"scales":[{"name":"angular","type":"point","range":{"signal":"[-PI, PI]"},"padding":0.5,"domain":{"data":"table","field":"key"}},{"name":"radial","type":"linear","range":{"signal":"[0, radius]"},"zero":true,"nice":false,"domain":{"data":"table","field":"value"},"domainMin":0},{"name":"color","type":"ordinal","domain":{"data":"table","field":"category"},"range":{"scheme":"category10"}}],"encode":{"enter":{"x":{"signal":"radius"},"y":{"signal":"radius"}}},"marks":[{"type":"group","name":"categories","zindex":1,"from":{"facet":{"data":"table","name":"facet","groupby":["category"]}},"marks":[{"type":"line","name":"category-line","from":{"data":"facet"},"encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"signal":"scale(\'radial\', datum.value) * cos(scale(\'angular\', datum.key))"},"y":{"signal":"scale(\'radial\', datum.value) * sin(scale(\'angular\', datum.key))"},"stroke":{"scale":"color","field":"category"},"strokeWidth":{"value":1},"fill":{"scale":"color","field":"category"},"fillOpacity":{"value":0.1}}}},{"type":"text","name":"value-text","from":{"data":"category-line"},"encode":{"enter":{"x":{"signal":"datum.x"},"y":{"signal":"datum.y"},"text":{"signal":"datum.datum.value"},"align":{"value":"center"},"baseline":{"value":"middle"},"fill":{"value":"black"}}}}]},{"type":"rule","name":"radial-grid","from":{"data":"keys"},"zindex":0,"encode":{"enter":{"x":{"value":0},"y":{"value":0},"x2":{"signal":"radius * cos(scale(\'angular\', datum.key))"},"y2":{"signal":"radius * sin(scale(\'angular\', datum.key))"},"stroke":{"value":"lightgray"},"strokeWidth":{"value":1}}}},{"type":"text","name":"key-label","from":{"data":"keys"},"zindex":1,"encode":{"enter":{"x":{"signal":"(radius + 5) * cos(scale(\'angular\', datum.key))"},"y":{"signal":"(radius + 5) * sin(scale(\'angular\', datum.key))"},"text":{"field":"key"},"align":[{"test":"abs(scale(\'angular\', datum.key)) > PI / 2","value":"right"},{"value":"left"}],"baseline":[{"test":"scale(\'angular\', datum.key) > 0","value":"top"},{"test":"scale(\'angular\', datum.key) == 0","value":"middle"},{"value":"bottom"}],"fill":{"value":"black"},"fontWeight":{"value":"bold"}}}},{"type":"line","name":"outer-line","from":{"data":"radial-grid"},"encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"field":"x2"},"y":{"field":"y2"},"stroke":{"value":"lightgray"},"strokeWidth":{"value":1}}}}]}'}"
       container-height="450px">
     </clabs-chat-chart>
     <br />
@@ -342,6 +352,26 @@ export const Showcase = {
       container-height="650px">
     </clabs-chat-chart>
     <br />
+
+    { "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "width":
+    800, "height": 500, "projection": { "type": "albersUsa" }, "layer": [ {
+    "data": { "url": "data/us-10m.json", "format": { "type": "topojson",
+    "feature": "states" } }, "mark": { "type": "geoshape", "fill": "lightgray",
+    "stroke": "white" } }, { "data": { "url": "data/us-state-capitals.json" },
+    "encoding": { "longitude": { "field": "lon", "type": "quantitative" },
+    "latitude": { "field": "lat", "type": "quantitative" } }, "layer": [{
+    "mark": { "type": "circle", "color": "orange" } }, { "mark": { "type":
+    "text", "dy": -10 }, "encoding": { "text": {"field": "city", "type":
+    "nominal"} } }] } ] } { "$schema":
+    "https://vega.github.io/schema/vega-lite/v6.json", "description": "A simple
+    radial chart with embedded data.", "data": { "values": [12, 23, 47, 6, 52,
+    19] }, "layer": [{ "mark": {"type": "arc", "innerRadius": 20, "stroke":
+    "#fff"} },{ "mark": {"type": "text", "radiusOffset": 10}, "encoding": {
+    "text": {"field": "data", "type": "quantitative"} } }], "encoding": {
+    "theta": {"field": "data", "type": "quantitative", "stack": true}, "radius":
+    {"field": "data", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}},
+    "color": {"field": "data", "type": "nominal", "legend": null} } }
+
     <h4>Multi histogram</h4>
     <br />
     <clabs-chat-chart
@@ -358,7 +388,8 @@ export const Showcase = {
     <clabs-chat-chart
       theme="${chartTheme}"
       content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":700,"height":500,"view":{"stroke":"transparent"},"layer":[{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonBoroughs.json","format":{"type":"topojson","feature":"boroughs"}},"mark":{"type":"geoshape","stroke":"white","strokeWidth":2},"encoding":{"color":{"value":"#eee"}}},{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonCentroids.json","format":{"type":"json"}},"transform":[{"calculate":"indexof (datum.name, \' \') > 0  ? substring(datum.name,0,indexof(datum.name, \' \')) : datum.name","as":"bLabel"}],"mark":"text","encoding":{"longitude":{"field":"cx","type":"quantitative"},"latitude":{"field":"cy","type":"quantitative"},"text":{"field":"bLabel","type":"nominal"},"size":{"value":8},"opacity":{"value":0.6}}},{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonTubeLines.json","format":{"type":"topojson","feature":"line"}},"mark":{"type":"geoshape","filled":false,"strokeWidth":2},"encoding":{"color":{"field":"id","type":"nominal","legend":{"title":null,"orient":"bottom-right","offset":0},"scale":{"domain":["Bakerloo","Central","Circle","District","DLR","Hammersmith & City","Jubilee","Metropolitan","Northern","Piccadilly","Victoria","Waterloo & City"],"range":["rgb(137,78,36)","rgb(220,36,30)","rgb(255,206,0)","rgb(1,114,41)","rgb(0,175,173)","rgb(215,153,175)","rgb(106,114,120)","rgb(114,17,84)","rgb(0,0,0)","rgb(0,24,168)","rgb(0,160,226)","rgb(106,187,170)"]}}}}]}'}"
-      container-height="450px">
+      container-height="450px"
+      container-width="450px">
     </clabs-chat-chart>
     <br />
     <h4>Parallel Coordinates</h4>
@@ -377,12 +408,13 @@ export const Showcase = {
       container-height="350px">
     </clabs-chat-chart>
     <br />
-    <h4>Candle stick chart</h4>
+    <br />
+    <h4>Orthographic world map</h4>
     <br />
     <clabs-chat-chart
       theme="${chartTheme}"
-      content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":400,"description":"A candlestick chart","data":{"url":"https://vega.github.io/vega-lite/examples/data/ohlc.json"},"encoding":{"x":{"field":"date","type":"temporal","title":"Date in 2009","axis":{"format":"%m/%d","labelAngle":-45,"title":"Date in 2009"}},"y":{"type":"quantitative","scale":{"zero":false},"axis":{"title":"Price"}},"color":{"condition":{"test":"datum.open < datum.close","value":"#24a148"},"value":"#fa4d56"}},"layer":[{"mark":"rule","encoding":{"y":{"field":"low"},"y2":{"field":"high"}}},{"mark":"bar","encoding":{"y":{"field":"open"},"y2":{"field":"close"}}}]}'}"
-      container-height="350px">
+      content="${'{"$schema": "https://vega.github.io/schema/vega-lite/v5.json","width": 500,"height": 300,"params": [{"name": "projection","value": "orthographic"}],"data": {"url": "https://vega.github.io/vega-lite/examples/data/world-110m.json","format": {"type": "topojson", "feature": "countries"}},"projection": {"type": {"expr": "projection"}},"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "gray"}}'}"
+      container-height="450px">
     </clabs-chat-chart>
     <br />`,
 };

@@ -1,4 +1,4 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypes, Markdown, Meta, Canvas } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../../../../globals/internal/storybook-cdn';
 import * as ChartElementStories from './chartElement.stories';
 import packageJson from '../../../package.json';
@@ -101,9 +101,9 @@ Here's a quick example to get you started.
       </td>
     </tr>
     <tr>
-      <td>`debug`</td>
+      <td>`debug-mode`</td>
       <td>boolean</td>
-      <td>false</td>
+      <td>true</td>
       <td>
         shows specification editor button and displays all errors in component
         when in error mode, otherwise show: Chart failed to render, see console
@@ -221,6 +221,54 @@ Here's a quick example to get you started.
         and this will false. If streaming: raw data is incrementally displayed
         until complete and rendered
       </td>
+    </tr>
+         <tr>
+      <td>`selected`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       add selection border to chart container
+      </td>
+    </tr>
+     <tr>
+      <td>`selectable`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose if chart container is hoverable and selectable, append border on click
+      </td>
+    </tr>
+     <tr>
+      <td>`use-vega-carbon-theme`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose to override carbonification process and opt for simple Carbon themes (based on auto-detected carbon theme). Warning: these are sinplified and may not cover most edge cases.
+      </td>
+    </tr>
+     <tr>
+      <td>`enable-context`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       show button that triggers chart selection event, meant to update chat context
+      </td>
+    </tr>
+     <tr>
+      <td>`streaming`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       enable streaming animation capabilities for incomplete content
+      </td>
+    </tr>
+     <tr>
+      <td>`thumbnail-width`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose maximum width of thumbnail object
+      </td>
     </tr>
   </tbody>
 </table>
@@ -427,3 +475,7 @@ charts. Touch/mobile features have not been tested and attributes are still
 subject to change. Features such as legend interactions to filter out data,
 viewing the source data as a table, locale support, and are not currently
 implemented as well. (subject to change)
+
+
+## Showcase
+<Canvas of={ChartElementStories.Showcase} />
@@ -90,6 +90,12 @@ export default class chartElement extends LitElement {
   @property({ type: Boolean, attribute: 'disable-options' })
   disableOptions;
 
+  /**
+   * Disable all chart option buttons, supercedes all other individual button options
+   */
+  @property({ type: Boolean, attribute: 'use-vega-carbon-theme' })
+  forceCarbonTheme;
+
   /**
    * Disable recontext button to make chart current
    */
@@ -329,6 +335,10 @@ export default class chartElement extends LitElement {
       this.disableEditor = true;
     }
 
+    if (this.forceCarbonTheme) {
+      this.carbonify = false;
+    }
+
     if (this.renderMethod !== 'svg' && this.renderMethod !== 'canvas') {
       this.renderMethod = 'canvas';
     }
@@ -642,7 +652,8 @@ export default class chartElement extends LitElement {
         if (this.renderMethod === 'canvas') {
           renderMode = 'canvas';
         }
-        await VegaEmbed.default(targetDiv, chosenSpec, {
+
+        const vegaLiteOptions = {
           actions: false,
           hover: this.enableTooltip,
           //theme: 'carbon' + this.theme,
@@ -657,7 +668,13 @@ export default class chartElement extends LitElement {
             },
           },
           renderer: renderMode as 'canvas' | 'svg',
-        })
+        };
+
+        if (this.forceCarbonTheme) {
+          vegaLiteOptions['theme'] = 'carbon' + this.theme;
+        }
+
+        await VegaEmbed.default(targetDiv, chosenSpec, vegaLiteOptions)
           .then(({ view }) => {
             this._previousSpec = this._visualizationSpec;
             if (this.thumbNail) {

@@ -13,7 +13,7 @@ import '@carbon/web-components/es/components/code-snippet/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 
 export default {
-  title: 'Components/Chat',
+  title: 'Components/AI Components/[LABS TESTING ONLY] Core Chat',
   component: 'clabs-chat',
 };
 

@@ -71,7 +71,7 @@ export default class CLABSChat extends LitElement {
    * force-auto-update - force scroll down no matter what
    */
   @property({ type: Boolean, attribute: 'force-auto-update', reflect: true })
-  forceAutoUpdate;
+  forceAutoUpdate = true;
 
   /**
    * show launcher when closed

@@ -120,14 +120,14 @@ $css--plex: true !default;
     box-sizing: border-box;
     flex: 0 0 20px;
     border-inline-end: 1px solid transparent;
-    cursor: pointer;
     inline-size: 2px;
     max-block-size: 20px;
     padding-inline-end: 0.5em;
     user-select: none;
   }
   .#{$clabs-prefix}--chat-code-line-collapser svg {
     block-size: 20px;
+    cursor: pointer;
     inline-size: 20px;
   }
 
@@ -370,7 +370,7 @@ $css--plex: true !default;
 
     .hljs-attr,
     .hljs-attribute {
-      color: $teal-60;
+      color: $orange-60;
     }
 
     .hljs-variable,
@@ -501,7 +501,7 @@ $css--plex: true !default;
 
     .hljs-attr,
     .hljs-attribute {
-      color: $teal-50;
+      color: $orange-50;
     }
 
     .hljs-variable,

@@ -781,7 +781,7 @@ export default class codeElement extends LitElement {
     this._displayedContent = this._originalContent;
     this._currentlyEdited = false;
 
-    const codeEditedEvent = new CustomEvent('on-code-edit-change', {
+    const codeEditedEvent = new CustomEvent('on-code-edit-cancel', {
       detail: {
         previousLineData: this._originalContent,
         newLineText: this._originalContent,

@@ -12,7 +12,7 @@ import { html } from 'lit';
 
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
 export default {
-  title: 'Components/Research/Diagram',
+  title: 'Components/AI Components/Diagram',
 };
 
 const examples = [
@@ -211,6 +211,8 @@ export const Showcase = {
     html` ${examples.map(
       (example) =>
         html`
+          <h3>${example.title}</h3>
+          <br />
           <clabs-chat-diagram
             title="${example.title}"
             width="${example.width}"

@@ -1,4 +1,4 @@
-import { Markdown, Meta} from '@storybook/blocks';
+import { Markdown, Meta, Canvas} from '@storybook/blocks';
 import * as elementStories from './diagramElement.stories';
 import packageJson from '../../../package.json';
 
@@ -15,3 +15,6 @@ import packageJson from '../../../package.json';
 * **Target library:** `Carbon AI Chat`
 * **Target library maintainer(s) / PR Reviewer(s):** Ethan Winters, Damon Lundin
 * **Support channel:** `#carbon-ai-chat`
+
+
+<Canvas of={elementStories.Showcase} />