From f0a6bf1e3220b7257e188e3e11e0bebf863c0fbe Mon Sep 17 00:00:00 2001 From: ElisavetAmp Date: Mon, 27 Jun 2022 15:48:31 +0300 Subject: [PATCH] fix: fix initParamsValidationRules --- clip/clip.css | 8 +- clip/clip.js | 3 +- clip/incidents.js | 49 +---- clip/initParams.js | 37 ++-- clip/initParamsValidationRules.js | 308 ++++++++++++++++++++++++++++++ 5 files changed, 335 insertions(+), 70 deletions(-) create mode 100644 clip/initParamsValidationRules.js diff --git a/clip/clip.css b/clip/clip.css index 93c98f6..d9a6284 100644 --- a/clip/clip.css +++ b/clip/clip.css @@ -2,7 +2,6 @@ --primary:{{ initParams.styles.primary }}; --secondary:{{ initParams.styles.secondary }}; --accent:{{ initParams.styles.accent }}; - --fontFamily:{{initParams.styles.font}} } .root { @@ -410,11 +409,14 @@ width: 90%; position: absolute; display: flex; - flex-direction: column; + flex-direction: row; flex-wrap: wrap; + justify-content: center; + align-items: center; left: 8%; top:8%; - height: 60%; + height: 40%; + gap: 10%; } .competitor-approach-list-root{ diff --git a/clip/clip.js b/clip/clip.js index 93070d9..272d4e4 100644 --- a/clip/clip.js +++ b/clip/clip.js @@ -15,6 +15,7 @@ import { opacity1, } from "./incidents"; import { initParams } from "./initParams"; +import initParamsValidationRules from "./initParamsValidationRules"; export const clip = new HTMLClip({ html, @@ -151,7 +152,7 @@ clip.addIncident( widthMove("6%", ".traction > .lt,.traction > .rb", 700), 22900 ); -clip.addIncident(lineGraph,22900) +clip.addIncident(lineGraph(initParams[0].value.traction.graphData),22900) //remove traction slide clip.addIncident( diff --git a/clip/incidents.js b/clip/incidents.js index 6fd6e9a..3071bcc 100644 --- a/clip/incidents.js +++ b/clip/incidents.js @@ -193,55 +193,10 @@ export const riple = ( } ); }; -export const lineGraph = +export const lineGraph = (graphdata)=> new Graph.LineGraph( { - data: { - "title": "", - "maxValue": 40, - "hover": false, - "showGrid":false, - "dataSets": [ - { - "title": "PhaseA", - "color": "#ff1f4c" - }, - { - "title": "PhaseB", - "color": "#ff82ad" - } - ], - "data": [ - { - "name": "Id1", - "values": [10, 18] - }, - { - "name": "Id2", - "values": [15, 27] - }, - { - "name": "Id3", - "values": [29, 23] - }, - { - "name": "Id4", - "values": [31, 35] - }, - { - "name": "Id5", - "values": [29, 23] - }, - { - "name": "Id6", - "values": [15, 27] - }, - { - "name": "Id7", - "values": [10, 18] - } - ] - }, + data: graphdata, trace: { toggle: false, scale: 1.45, diff --git a/clip/initParams.js b/clip/initParams.js index 9a88bec..e3987cd 100644 --- a/clip/initParams.js +++ b/clip/initParams.js @@ -6,7 +6,6 @@ export const initParams = [ accent:"#f4f4f4", secondary:"#ff4343", primary:"#202020", - font:"Outfit" }, intro: { slogan:"Write your company name above and an intriguing summary of what your company does here.", @@ -97,42 +96,42 @@ export const initParams = [ maxValue:40, dataSets:[ { - "title": "PhaseA", - "color": "#ff1f4c" + title: "PhaseA", + color: "#ff1f4c" }, { - "title": "PhaseB", - "color": "#ff82ad" + title: "PhaseB", + color: "#ff82ad" } ], data:[ { - "name": "Id1", - "values": [10, 18] + name: "Id1", + values: [10, 18] }, { - "name": "Id2", - "values": [15, 27] + name: "Id2", + values: [15, 27] }, { - "name": "Id3", - "values": [29, 23] + name: "Id3", + values: [29, 23] }, { - "name": "Id4", - "values": [31, 35] + name: "Id4", + values: [31, 35] }, { - "name": "Id5", - "values": [29, 23] + name: "Id5", + values: [29, 23] }, { - "name": "Id6", - "values": [15, 27] + name: "Id6", + values: [15, 27] }, { - "name": "Id7", - "values": [10, 18] + name: "Id7", + values: [10, 18] } ], } diff --git a/clip/initParamsValidationRules.js b/clip/initParamsValidationRules.js new file mode 100644 index 0000000..90820d1 --- /dev/null +++ b/clip/initParamsValidationRules.js @@ -0,0 +1,308 @@ +export default { + styles:{ + label:"Styles", + type:"object", + props:{ + accent:{ type: "color" }, + secondary:{ type: "color" }, + primary:{ type: "color" }, + } + }, + intro:{ + label:"Intro Slide", + type:"object", + props:{ + slogan:{ type: "string" }, + name:{ type: "string" }, + } + }, + problem:{ + label:"Problem Slide", + type:"object", + props:{ + title:{ type: "string" }, + subtitle : { type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + } + } + }, + solution:{ + label:"Solution Slide", + type:"object", + props:{ + title:{ type: "string" }, + subtitle : { type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + } + } + }, + product:{ + label:"Product Slide", + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + img: { type: "string" }, + } + }, + timeline:{ + label:"Timeline Slide", + type:"object", + props:{ + title:{ type: "string" }, + subtitle : { type: "string" }, + steps: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + date: { type: "string" }, + } + } + } + } + }, + timing:{ + label:"Timing Slide", + type:"object", + props:{ + title:{ type: "string" }, + reasons: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + }, + img:{ type: "string" }, + } + }, + traction:{ + label:"Traction Slide", + type:"object", + props:{ + title: { type: "string" }, + subtitle: { type: "string" }, + graphData:{ + type:"object", + props:{ + title:{ type: "string" }, + maxValue:{ type: "number"}, + dataSets: { + type: "array", + items:{ + type: "object", + props:{ + title: { type: "string" }, + color: { type: "color" }, + } + } + }, + data: { + type: "array", + items:{ + type: "object", + props:{ + name: { type: "string" }, + values: { + type: "array", + items:{ + type:"number" + } + }, + } + } + } + } + } + } + }, + targetMarket:{ + label:"Target Market Slide", + type: "object", + props:{ + title:{ type: "string" }, + subtitle:{ type: "string" }, + img:{ type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + }, + } + }, + marketSize:{ + label:"Market Size Slide", + type: "object", + props:{ + title:{ type: "string" }, + subtitle:{ type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + number: { type: "string" }, + tag: { type: "string" }, + } + } + }, + } + }, + competitors:{ + label:"Competitors Slide", + type:"object", + props:{ + dCompetitors:{ + type: "object", + props:{ + title:{ type:"string"}, + list:{ + type:"array", + items:{ + type:"string" + } + } + } + }, + iCompetitors:{ + type: "object", + props:{ + title:{ type:"string"}, + list:{ + type:"array", + items:{ + type:"string" + } + } + } + } + } + }, + competiveAdvantages:{ + label:"Competive Advantages Slide", + type:"object", + props:{ + title:{ type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + }, + } + }, + cApproach:{ + label:"Competitor Approach Slide", + type:"object", + props:{ + title:{ type: "string" }, + list: { + type:"array", + items:{ + type:"object", + props:{ + icon: { type: "string" }, + title: { type: "string" }, + description: { type: "string" }, + } + } + }, + } + }, + model:{ + label:"Model Slide", + type:"object", + props:{ + title:{ type: "string" }, + list: { + type:"array", + items:{ + type:"string", + } + }, + } + }, + team:{ + label:"Team Slide", + type:"object", + props:{ + title:{ type: "string" }, + list: { + type:"array", + list:{ + type:"object", + props:{ + img: { type: "string" }, + title: { type: "string" }, + subtitle: { type: "string" }, + } + } + }, + } + }, + future:{ + label:"Future Steps Slide", + type:"object", + props:{ + title:{ type: "string" }, + subtitle:{ type: "string" }, + steps: { + type:"array", + list:{ + type:"object", + props:{ + title: { type: "string" }, + description: { type: "string" }, + } + } + }, + } + }, + contact:{ + label:"Contact Slide", + type:"object", + props:{ + title:{ type: "string" }, + list: { + type:"array", + list:{ + type:"object", + props:{ + icon: { type: "string" }, + info: { type: "string" }, + } + } + }, + } + } +}; \ No newline at end of file