@pb33f/cowboy-components 0.6.7 → 0.7.0

package/dist/components/time-vortex/timeline-view.css.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+export default css `
+    .stats-container {
+        display: flex;
+        padding: 10px 10px 10px 20px;
+        height: 370px;
+    }
+    
+    .changes-chart {
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+
+    sl-details::part(base) {
+        font-size: 1rem;
+        border-radius: 0;
+        background-color: var(--background-color);
+        padding: 0 0 0 10px;
+    }
+
+    sl-details::part(header) {
+        font-size: 0.9rem;
+        padding-top: 10px;
+        padding-bottom: 13px;
+        padding-left: 0;
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+`;

package/dist/components/time-vortex/timeline-view.d.ts

@@ -0,0 +1,32 @@
+import { Colorful } from "../charts/chart-colors.js";
+import { TemplateResult } from "lit";
+import { LineDataSet } from "../charts/config.js";
+import { BeefyChart } from "../charts/beefy-chart";
+import { Statistic } from "../rodeo/statistic.js";
+import '../rodeo/statistic.js';
+export declare class TimelineView extends Colorful {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    changeDatasets: LineDataSet[];
+    violationDatasets: LineDataSet[];
+    qualityDatasets: LineDataSet[];
+    changeLabels: string[];
+    violationLabels: string[];
+    qualityLabels: string[];
+    charts: BeefyChart[];
+    constructor();
+    stats: Statistic[];
+    totalAdditions: number;
+    totalRemovals: number;
+    totalModifications: number;
+    totalBreakingChanges: number;
+    totalErrors: number;
+    totalWarnings: number;
+    totalInforms: number;
+    skipTimeline: boolean;
+    updated(): void;
+    firstUpdated(): Promise<void>;
+    renderChangeStatistics(): TemplateResult[];
+    renderViolationStatistics(): TemplateResult[];
+    render(): TemplateResult<1>;
+}

package/dist/components/time-vortex/timeline-view.js

@@ -0,0 +1,233 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, queryAll } from "lit/decorators.js";
+import { Colorful } from "../charts/chart-colors.js";
+import { html } from "lit";
+import timelineViewCss from "./timeline-view.css.js";
+import '../rodeo/statistic.js';
+let TimelineView = class TimelineView extends Colorful {
+    constructor() {
+        super();
+        this.title = 'chart';
+        this.totalModifications = 0;
+        this.totalAdditions = 0;
+        this.totalRemovals = 0;
+        this.totalBreakingChanges = 0;
+        this.skipTimeline = false;
+    }
+    updated() {
+        if (this.charts) {
+            this.changeDatasets?.forEach((dataset) => {
+                switch (dataset.label) {
+                    case 'Modifications':
+                        dataset.borderColor = this.primary;
+                        this.totalModifications = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'Additions':
+                        dataset.borderColor = this.ok;
+                        this.totalAdditions = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'Removals':
+                        dataset.borderColor = this.warn;
+                        this.totalRemovals = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'Breaking Changes':
+                        dataset.borderColor = this.error;
+                        this.totalBreakingChanges = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                }
+            });
+            this.violationDatasets?.forEach((dataset) => {
+                switch (dataset.label) {
+                    case 'Errors':
+                        dataset.borderColor = this.error;
+                        this.totalErrors = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'Warnings':
+                        dataset.borderColor = this.warn;
+                        this.totalWarnings = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                    case 'Informs':
+                        dataset.borderColor = this.primary;
+                        this.totalInforms = dataset.data.reduce((a, b) => a + b, 0);
+                        break;
+                }
+            });
+            this.qualityDatasets?.forEach((dataset) => {
+                dataset.borderColor = this.primary;
+            });
+            this.charts?.forEach((chart) => {
+                switch (chart.id) {
+                    case 'change-chart':
+                        chart.datasets = this.changeDatasets;
+                        chart.labels = this.changeLabels;
+                        break;
+                    case 'violation-chart':
+                        chart.datasets = this.violationDatasets;
+                        chart.labels = this.violationLabels;
+                        break;
+                    case 'diagnosis-chart':
+                        chart.datasets = this.qualityDatasets;
+                        chart.labels = this.qualityLabels;
+                        break;
+                }
+                chart.updateChart();
+            });
+        }
+        this.stats?.forEach((stat) => {
+            stat.requestUpdate();
+        });
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+    }
+    renderChangeStatistics() {
+        const stats = [];
+        if (this.totalModifications > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Modifications" value="${this.totalModifications}"
+                                       label="Modifications"></pb33f-rodeo-statistic>`);
+        }
+        if (this.totalAdditions > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Additions" value="${this.totalAdditions}"
+                                       label="Additions"></pb33f-rodeo-statistic>`);
+        }
+        if (this.totalRemovals > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Removals" value="${this.totalRemovals}"
+                                       label="Removals"></pb33f-rodeo-statistic>`);
+        }
+        if (this.totalBreakingChanges > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Breaking Changes" value="${this.totalBreakingChanges}"
+                                       label="Breaking Changes"></pb33f-rodeo-statistic>`);
+        }
+        return stats;
+    }
+    renderViolationStatistics() {
+        const stats = [];
+        if (this.totalErrors > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Errors" value="${this.totalErrors}"
+                                       label="Errors"></pb33f-rodeo-statistic>`);
+        }
+        if (this.totalWarnings > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Warnings" value="${this.totalWarnings}"
+                                       label="Warnings"></pb33f-rodeo-statistic>`);
+        }
+        if (this.totalInforms > 0) {
+            stats.push(html `
+                <pb33f-rodeo-statistic small title="Informs" value="${this.totalInforms}"
+                                       label="Informs"></pb33f-rodeo-statistic>`);
+        }
+        return stats;
+    }
+    render() {
+        return html `
+       
+                <div class="changes-chart stats-container">
+                <pb33f-chart id="change-chart"
+                        height="400"
+                        smallTitle
+                        title="Changes made over time"
+                        .datasets=${this.changeDatasets}
+                        .labels=${this.changeLabels} legend></pb33f-chart>
+
+                <div style="padding-top: 20px;">
+                    <div>
+                        ${this.renderChangeStatistics()}
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="changes-chart stats-container">
+                <pb33f-chart id="violation-chart"
+                        height="400"
+                        smallTitle
+                        title="Violations over time"
+                        .datasets=${this.violationDatasets}
+                        .labels=${this.violationLabels} legend></pb33f-chart>
+
+                <div style="padding-top: 20px;">
+                    <div>
+                        ${this.renderViolationStatistics()}
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="changes-chart stats-container">
+                <pb33f-chart id="diagnosis-chart"
+                        height="400"
+                        width="1000"
+                        smallTitle
+                        ?legend=${false}
+                        title="Diagnosis score over time"
+                        .datasets=${this.qualityDatasets}
+                        .labels=${this.qualityLabels} legend></pb33f-chart>
+            </div>`;
+    }
+};
+TimelineView.styles = [timelineViewCss];
+__decorate([
+    property()
+], TimelineView.prototype, "title", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "changeDatasets", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "violationDatasets", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "qualityDatasets", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "changeLabels", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "violationLabels", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "qualityLabels", void 0);
+__decorate([
+    queryAll('pb33f-chart')
+], TimelineView.prototype, "charts", void 0);
+__decorate([
+    queryAll('pb33f-rodeo-statistic')
+], TimelineView.prototype, "stats", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalAdditions", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalRemovals", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalModifications", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalBreakingChanges", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalErrors", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalWarnings", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "totalInforms", void 0);
+__decorate([
+    property()
+], TimelineView.prototype, "skipTimeline", void 0);
+TimelineView = __decorate([
+    customElement("pb33f-timeline-view")
+], TimelineView);
+export { TimelineView };

package/dist/components/timeline/timeline-item.css.js

@@ -1,63 +1,110 @@
 import { css } from "lit";
 export default css `
-  :host {
-    display: flex;
-    position: relative;
-  }
-
-  .icon {
-    width: 110px;
-    min-height: 80px;
-    position: relative;
-  }
-
-  .icon:first-child {
-    min-height: 20px;
-  }
-  .icon > .timeline {
-    width: 40px;
-    height: 100%;
-    border-right: 2px solid var(--bars-and-borders);
-    position: absolute;
-  }
-
-  .timeline-icon {
-    width: 20px;
-    height: 20px;
-    border-radius: 15px;
-    margin: 0 10px;
-    text-align: center;
-    font-size: 20px;
-    position: absolute;
-    top: 10px;
-  }
-
-  .content {
-    flex-grow: 2;
-    min-height: 50px;
-  }
-
-  .request-time {
-    font-size: 0.7em;
-    color: var(--font-color-sub2);
-    position: absolute;
-    left: 50px;
-    top: 15px;
-    display: block;
-  }
+    :host {
+        display: flex;
+        position: relative;
+
+    }
+    
+    .icon {
+        max-width: 60px;
+        min-width: 55px;
+        min-height: 80px;
+        position: relative;
+    }
+
+    .icon:first-child {
+        min-height: 20px;
+    }
+
+    .icon > .timeline {
+        width: 40px;
+        height: 100%;
+        border-right: 2px solid var(--bars-and-borders);
+        // position: absolute;
+    }
+
+    .skinny {
+        width: 20px!important;
+    }
+
+    .skinny-icon {
+        min-width: 40px!important;
+      
+    }
+
+    .skinny-time {
+        min-width: 0!important;
+        max-width: 100%!important;
+        padding-top: 0!important;
+        height: initial;
+        min-height: 0!important;
+    }
+    
+    .skinny-timeline-icon {
+        top: 5px!important;
+    }
+
+    
+    .timeline-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 15px;
+        margin: 0 10px;
+        text-align: center;
+        font-size: 20px;
+        position: absolute;
+        top: 22px;
+    }
+
+    .content {
+        width: 100%;
+        display: flex;
+        flex-grow: 2;
+        min-height: 50px;
+        padding-top: 10px;
+        height: 50px;
+    }
+
+    .content-skinny {
+        width: 100%!important;
+        min-height: 50px!important;
+        height: 70px!important;
+       
+    }
+    
+    .request-time {
+        font-size: 0.7em;
+        color: var(--font-color-sub2);
+        //position: absolute;
+        //left: 50px;
+        //top: 15px;
+        min-width: 70px;
+        max-width: 70px;
+        display: block;
+        min-height: 50px;
+        padding-top: 15px;
+        
+    }
+    
+    .timeline-content {
+        width: 100%;
+    }
 
     @media only screen and (max-width: 1000px) {
         .icon > .timeline {
             width: 2px;
         }
+
         .icon {
             width: 15px;
-          
+
         }
+
         .request-time {
             display: none;
         }
     }
-    
-  
+
+
 `;

package/dist/components/timeline/timeline-item.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 export declare class TimelineItemComponent extends LitElement {
     static styles: import("lit").CSSResult;
+    skinny: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/timeline/timeline-item.js

@@ -4,14 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import timelineItemCss from "./timeline-item.css.js";
 let TimelineItemComponent = class TimelineItemComponent extends LitElement {
     constructor() {
         super();
+        this.skinny = false;
     }
     render() {
+        if (this.skinny) {
+            return html `
+              
+                    <div class="icon skinny-icon">
+                        <div class="timeline skinny"></div>
+                        <div class="timeline-icon skinny-timeline-icon">
+                            <slot name="icon"></slot>
+                        </div>
+                    </div>
+                    <div class="content-skinny">
+                        <slot name="time" class="request-time skinny-time"></slot>
+                        <slot name="content" class="timeline-content"></slot>
+                    </div>
+          `;
+        }
         return html `
             <div class="icon">
                 <div class="timeline"></div>
@@ -26,6 +42,9 @@ let TimelineItemComponent = class TimelineItemComponent extends LitElement {
     }
 };
 TimelineItemComponent.styles = timelineItemCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineItemComponent.prototype, "skinny", void 0);
 TimelineItemComponent = __decorate([
     customElement('pb33f-timeline-item')
 ], TimelineItemComponent);

package/dist/components/timeline/timeline.css.js

@@ -1,50 +1,56 @@
 import { css } from "lit";
 export default css `
-  
-  pb33f-timeline-item {
-    width: 100%;
-    margin-bottom: 20px;
-  } 
-  
-  .start {
-    position: relative;
-    width: 100%;
-    height: 20px;
-  }
-  
-  .ball-start {
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: var(--bars-and-borders);
-    position: absolute;
-    left: 33px;
-    top: 5px;
-    z-index: 10;
-  }
-
-  .ball-end {
-    width: 15px;
-    height: 15px;
-    border-radius: 10px;
-    background-color: var(--bars-and-borders);
-    position: absolute;
-    left: 33px;
-    top: 0;
-    z-index: 10;
-    margin-bottom: 20px;
-  }
-  
-  .end {
-    position: relative;
-    width: 100%;
-    height: 20px;
-  }
+
+    pb33f-timeline-item {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .start {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
+    
+
+    .ball-start {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 5px;
+        z-index: 10;
+    }
+    
+    .skinny {
+        left: 7px!important;
+    }
+
+    .ball-end {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 0;
+        z-index: 10;
+        margin-bottom: 20px;
+    }
+
+    .end {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
 
     @media only screen and (max-width: 1000px) {
         .ball-start {
             left: -5px;
         }
+
         .ball-end {
             left: -5px;
 

package/dist/components/timeline/timeline.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 export declare class TimelineComponent extends LitElement {
     static styles: import("lit").CSSResult;
+    skinny: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/timeline/timeline.js

@@ -4,26 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import timelineCss from "./timeline.css.js";
 let TimelineComponent = class TimelineComponent extends LitElement {
     constructor() {
         super();
+        this.skinny = false;
     }
     render() {
         return html `
-            <div class="start">
-                <div class="ball-start"></div>
+            <div class="start ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-start ${this.skinny ? 'skinny' : ''}"></div>
             </div>
             <slot></slot>
-            <div class="end">
-                <div class="ball-end"></div>
+            <div class="end ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-end ${this.skinny ? 'skinny' : ''}"></div>
             </div>
         `;
     }
 };
 TimelineComponent.styles = timelineCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineComponent.prototype, "skinny", void 0);
 TimelineComponent = __decorate([
     customElement('pb33f-timeline')
 ], TimelineComponent);

package/dist/components/toast/toast-component.css.js

@@ -18,6 +18,10 @@ export default css `
         z-index: 101;
     }
     
+    .details {
+        word-break: break-word;
+    }
+    
     .active {
         transform: translateX(22%);
     }

package/dist/components/visualizer/equalizer.d.ts

@@ -41,6 +41,7 @@ export declare class EqualizerComponent extends HasEyes {
     renderRefs: boolean;
     renderPoly: boolean;
     dimDependencies: boolean;
+    renderEqualizer: boolean;
     renderObjects: {
         type: string;
         label: string;
@@ -64,6 +65,7 @@ export declare class EqualizerComponent extends HasEyes {
         enabled?: undefined;
     })[];
     constructor();
+    updated(): void;
     navigateToRoot(): void;
     buildRenderObjects(): void;
     buildRenderObjectFilters(): void;