wip working looking okayish
This commit is contained in:
Gerard Burns
parent
e7c62c041b
commit
c0cc6b2afe
|
|
@ -159,6 +159,7 @@
|
|||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--grey-4);
|
||||
|
||||
transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,116 +40,99 @@
|
|||
<div
|
||||
class={`tooltipContents ${supportLevelClass}`}
|
||||
>
|
||||
<div class={`supportLevel ${supportLevelClass}`}>
|
||||
<Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
|
||||
<p>{supportLevelText}</p>
|
||||
<div class="columnName">
|
||||
{columnName}
|
||||
</div>
|
||||
<div class="contextTooltipContent">
|
||||
<div class="contextTooltipHeader">
|
||||
<span class="columnName">
|
||||
{columnName}
|
||||
</span><span> is a </span>
|
||||
<a target=”_blank” href={docLink} class="link">
|
||||
<Icon name={columnIcon} />
|
||||
<span>{columnType}</span>
|
||||
</a>
|
||||
<span>column.</span>
|
||||
<div class="divider"></div>
|
||||
<div class="line">
|
||||
<a target=”_blank” href={docLink} class="chip link">
|
||||
<Icon size="S" name={columnIcon} />
|
||||
<span>{columnType} Column</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class={`line ${supportLevelClass}`}>
|
||||
<div class={`chip supportChip ${supportLevelClass}`}>
|
||||
<Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
|
||||
<span>{supportLevelText}</span>
|
||||
</div>
|
||||
<span>with</span>
|
||||
<div class="chip link">
|
||||
<Icon size="S" name={"GraphPie"} />
|
||||
<span>Chart Components</span>
|
||||
</div>
|
||||
|
||||
{#if errors.length > 0}
|
||||
{#each errors as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else if warnings.length > 0}
|
||||
{#each warnings as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else}
|
||||
<p>{supportLevelIconTooltip}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if warnings.includes("string number warning")}
|
||||
<div class={`line ${supportLevelClass}`}>
|
||||
<span>
|
||||
Non-numeric values will not be displayed
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!--
|
||||
{#if errors.length > 0}
|
||||
{#each errors as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else if warnings.length > 0}
|
||||
{#each warnings as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else}
|
||||
<p>{supportLevelIconTooltip}</p>
|
||||
{/if}
|
||||
-->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.columnName {
|
||||
font-style: italic;
|
||||
padding: 3px 6px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--grey-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid var(--grey-4);
|
||||
margin: 6px 0 16px;
|
||||
}
|
||||
|
||||
.tooltipContents {
|
||||
max-width: 400px;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
background-color: var(--background-alt);
|
||||
display: block;
|
||||
padding: 0 0 12px 0 ;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelUnsupported {
|
||||
background-color: var(--red);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelPartialSupport {
|
||||
background-color: var(--yellow);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelSupported {
|
||||
background-color: var(--green);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.contextTooltipHeader {
|
||||
row-gap: 6px;
|
||||
column-gap: 8px;
|
||||
.line {
|
||||
background-color: var(--background-alt);
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-width: var(--spectrum-actionbutton-border-size);
|
||||
border-radius: var(--spectrum-alias-border-radius-regular);
|
||||
border: 1px solid
|
||||
var(
|
||||
--spectrum-actionbutton-m-border-color,
|
||||
var(--spectrum-alias-border-color)
|
||||
);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.contextTooltipContent {
|
||||
color: var(--ink);
|
||||
margin: 0px 12px;
|
||||
color: black;
|
||||
.line > span {
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.contextTooltipContent > p {
|
||||
row-gap: 6px;
|
||||
column-gap: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-width: var(--spectrum-actionbutton-border-size);
|
||||
border-radius: var(--spectrum-alias-border-radius-regular);
|
||||
border: 1px solid
|
||||
var(
|
||||
--spectrum-actionbutton-m-border-color,
|
||||
var(--spectrum-alias-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.columnName {
|
||||
|
||||
font-style: italic;
|
||||
padding: 3px 6px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--grey-3);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.link {
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
padding: 3px 6px;
|
||||
border-radius: 5px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.link {
|
||||
background-color: var(--spectrum-global-color-blue-500);
|
||||
color: white;
|
||||
transition: background-color 300ms
|
||||
|
|
@ -164,33 +147,23 @@
|
|||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.link :global(span) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.supportLevel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--spectrum-alias-item-height-m);
|
||||
padding: 0px var(--spectrum-alias-item-padding-m);
|
||||
margin-bottom: 12px;
|
||||
.supportChip {
|
||||
color: black;
|
||||
}
|
||||
.supportLevel :global(svg) {
|
||||
|
||||
.supportChip :global(svg) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelUnsupported {
|
||||
background-color: var(--red-light)
|
||||
.supportChip.supportLevelUnsupported {
|
||||
background-color: var(--red)
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelPartialSupport {
|
||||
background-color: var(--yellow-light)
|
||||
.supportChip.supportLevelPartialSupport {
|
||||
background-color: var(--yellow)
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelSupported {
|
||||
background-color: var(--green-light)
|
||||
.supportChip.supportLevelSupported {
|
||||
background-color: var(--green)
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
class: "supportLevelUnsupported",
|
||||
icon: "Alert",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Unsupported"
|
||||
text: "Not Compatible"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
class: "supportLevelPartialSupport",
|
||||
icon: "AlertCheck",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Partial Support"
|
||||
text: "Partially Compatible"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
class: "supportLevelSupported",
|
||||
icon: "CheckmarkCircle",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Supported"
|
||||
text: "Compatible"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
class: "supportLevelUnsupported",
|
||||
icon: "Alert",
|
||||
iconTooltip: "",
|
||||
text: "Unsupported"
|
||||
text: "No Support"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,6 +203,7 @@
|
|||
offset={20}
|
||||
>
|
||||
<ChartFieldContext
|
||||
support={fieldSupport[previousOption]}
|
||||
supportLevelClass={currentOptionSupport.class}
|
||||
supportLevelIcon={currentOptionSupport.icon}
|
||||
supportLevelIconTooltip={currentOptionSupport.iconTooltip}
|
||||
|
|
@ -215,6 +216,7 @@
|
|||
/>
|
||||
<ChartFieldContext
|
||||
slot="previous"
|
||||
support={fieldSupport[previousOption]}
|
||||
supportLevelClass={previousOptionSupport.class}
|
||||
supportLevelIcon={previousOptionSupport.icon}
|
||||
supportLevelIconTooltip={previousOptionSupport.iconTooltip}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ export const constants = {
|
|||
|
||||
export const validators = {
|
||||
chart: (fieldSchema) => {
|
||||
console.log(fieldSchema);
|
||||
try {
|
||||
const response = {
|
||||
level: null,
|
||||
|
|
@ -28,8 +27,9 @@ export const validators = {
|
|||
}
|
||||
|
||||
if (fieldSchema.type === "string") {
|
||||
|
||||
response.warnings.push(
|
||||
"This column can be used as an input for a chart, but non-numeric values may cause unexpected behavior.")
|
||||
"string number warning")
|
||||
}
|
||||
if (fieldSchema.type === "datetime") {
|
||||
response.warnings.push(
|
||||
|
|
|
|||
Loading…
Reference in New Issue