@baravak/risloo-profile-cli 4.6.2 → 4.7.0

package/src/samples/JSIQ9Q.js

@@ -0,0 +1,224 @@
+const { Profile, FS } = require("../Profile");
+
+const firstItemCats = [ 'negative', 'positive', 'negative', 'positive', 'negative', 'positive', 'negative', 'positive', 'negative', 'negative', 'negative', 'negative', 'positive', 'positive', 'positive', 'positive', 'positive', 'positive', 'negative', 'negative', 'negative', 'positive', 'positive', 'positive', 'negative', 'positive', 'positive', 'negative', 'negative', 'negative']
+
+class JSIQ9Q extends Profile {
+  // Number of pages
+  static pages = 2;
+
+  // Labels of the sample
+  labels = {
+    L0: { eng: "section_1_positive_total",  },
+    L1: { eng: "section_1_positive_average",  },
+
+    L2: { eng: "section_1_negative_total",  },
+    L3: { eng: "section_1_negative_average",  },
+
+    L4 : {eng: "section_2_total", fr: "", max:400},
+    L5 : {eng: "section_2_percentage", fr: "", max:0},
+    L6 : {eng: "section_2_family_system_consciousness_total", fr: "", max:25},
+    L7 : {eng: "section_2_family_system_consciousness_percentage", fr: "", max:0},
+    L8 : {eng: "section_2_love_giving_total", fr: "", max:120},
+    L9 : {eng: "section_2_love_giving_percentage", fr: "", max:0},
+    L10 : {eng: "section_2_power_perception_total", fr: "", max:175},
+    L12 : {eng: "section_2_power_perception_percentage", fr: "", max:0},
+    L13 : {eng: "section_2_sexual_safety_awareness_total", fr: "", max:80},
+    L14 : {eng: "section_2_sexual_safety_awareness_percentage", fr: "", max:0},
+
+    L15 : {eng: "section_2_male_safety_awareness_total", fr: "", max:40},
+    L16 : {eng: "section_2_male_safety_awareness_percentage", fr: "", max:0},
+    L17 : {eng: "section_2_perceived_safety_from_spouse_total", fr: "", max:40},
+    L18 : {eng: "section_2_perceived_safety_from_spouse_percentage", fr: "", max:0},
+
+  };
+
+  profileSpec = {
+    /* "sample" determines some important info about the sample and profile */
+    /* Default prerequisites: 1. gender, 2. age, 3. education */
+    /* "prerequisites" is synonym to "fields" in our program */
+    sample: {
+      name: "پرسشنامه تعامل همسران - فرم آقایان" /* Name of the sample */,
+      multiProfile: false /* Whether the sample has multiple profiles or not */,
+      questions: true /* Determines whether to get questions from inital dataset or not */,
+      defaultFields: true /* Determines whether to have default prerequisites in the profile or not */,
+      fields: [] /* In case you want to get some additional fields and show in the profile */,
+    },
+    /* "profile" determines the dimensions of the drawn profile (to be used in svg tag viewbox) */
+    /* calculating its dimensions carefully is of great importance */
+    profile: {
+      get dimensions() {
+        return {
+          width: 851 + 2 * this.padding.x,
+          height: 676 + 2 * this.padding.y,
+        };
+      },
+      padding: {
+        x: 26,
+        y: 20,
+      },
+    },
+    /* "labels" part which has to be provided for each profile */
+    labels: Object.values(this.labels),
+  };
+
+  constructor(dataset, options, config = {}) {
+    super();
+    this._init(dataset, options, config);
+  }
+  f4 (data){
+    const {
+      spec: { parameters: spec },
+      dataset,
+    } = this;
+    const rawSpec = {
+      maxValue: 40,
+      circle: {
+        R: 55,
+        r: 55 * .65,
+        angles: {
+          start: FS.toRadians(-90),
+          end: FS.toRadians(180),
+        },
+        direction: false,
+        get totalAngle() {
+          return this.direction
+            ? 2 * Math.PI - (this.angles.end - this.angles.start)
+            : this.angles.end - this.angles.start;
+        },
+      }
+    }
+    return {
+      rawSpec,
+      mark: data.mark,
+      percentage: Math.round(data.percentage * 100),
+      zeta: (data.mark / rawSpec.maxValue) * rawSpec.circle.totalAngle + rawSpec.circle.angles.start,
+    };
+  }
+  firstPage(){
+    const {
+      spec: { parameters: spec },
+      dataset,
+    } = this;
+
+    const raw = {'negative': [[], [], [], [], []], 'positive': [[], [], [], [], []]};
+    const itemOptions = {
+        negative: [
+            {
+                color : "#737373",
+                bg : "#FAFAFA",
+                opacity : 1
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.03
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.06
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.1
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.15
+            }
+        ],
+        positive: [
+            {
+                color : "#78716C",
+                bg : "#FAFAF9",
+                opacity : 1
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.03
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.06
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.1
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.15
+            }
+        ]
+    }
+        
+    dataset.questions.slice(0, 30).forEach((row, i) => {
+        const answered = parseInt(row.user_answered)
+        const cat = firstItemCats[i]
+        const newRow = {
+            option: itemOptions[cat][answered],
+            value: answered,
+            label: i === 10 ? 'بی‌تفاوتی به مسئولیت‌های خانواده' :row.text
+        }
+        raw[cat][answered].push(newRow)
+    });
+    const positive = {
+        average: dataset.score[1].mark,
+        items: [...raw.positive[4],...raw.positive[3],...raw.positive[2],...raw.positive[1],...raw.positive[0]],
+        breakpoint: null
+    }
+    positive.items.forEach((item, i) => {
+        if (item.value < positive.average && !positive.breakpoint) {
+            positive.breakpoint = i
+        }
+    })
+    const negative = {
+        average: dataset.score[3].mark,
+        items: [...raw.negative[4],...raw.negative[3],...raw.negative[2],...raw.negative[1],...raw.negative[0]],
+        breakpoint: null
+    }
+    negative.items.forEach((item, i) => {
+        if (item.value < negative.average && !negative.breakpoint) {
+            negative.breakpoint = i
+        }
+    })
+    const items = dataset.score.slice(5, 14).filter((r, i) => i %2 !== 0).map((r, i) => {
+      r.percentage = Math.round(dataset.score[7 + (i*2)].mark * 100)
+      r.percentagex = dataset.score[7 + (i*2)].mark
+      return r
+    })
+    const total = dataset.score[4]
+    total.percentage = Math.round(dataset.score[5].mark * 100)
+    const f4_1 = dataset.score[14]
+    f4_1.percentage = dataset.score[15].mark
+
+    const f4_2 = dataset.score[16]
+    f4_2.percentage = dataset.score[17].mark
+    return { positive, negative, items : {
+      family: items[0],
+      love: items[1],
+      power: items[2],
+      sexual: items[3],
+    }, total, f4_1: this.f4(f4_1), f4_2: this.f4(f4_2),
+    titleAppend: ' - آقایان'
+    }
+  }
+  _calcContext() {
+    const firstPageData = this.firstPage()
+    return [firstPageData, {
+      love: 1 - firstPageData.items.love.percentagex,
+      power: 1 - firstPageData.items.power.percentagex,
+      titleAppend: firstPageData.titleAppend
+    }];
+  }
+}
+
+
+
+module.exports = JSIQ9Q;

package/src/samples/JSIQ9V.js

@@ -0,0 +1,225 @@
+const { Profile, FS } = require("../Profile");
+
+const firstItemCats = ["negative", "positive", "positive", "positive", "negative", "positive", "negative", "negative", "positive", "negative", "negative", "negative", "negative", "negative", "negative", "positive", "negative", "negative", "negative", "positive", "positive", "positive", "positive", "positive", "positive", "positive", "negative", "positive", "negative", "negative"]
+
+class JSIQ9V extends Profile {
+  // Number of pages
+  static pages = 2;
+
+  // Labels of the sample
+  labels = {
+    L0: { eng: "section_1_positive_total",  },
+    L1: { eng: "section_1_positive_average",  },
+
+    L2: { eng: "section_1_negative_total",  },
+    L3: { eng: "section_1_negative_average",  },
+
+    L4 : {eng: "section_2_total", fr: "", max:400},
+    L5 : {eng: "section_2_percentage", fr: "", max:0},
+    L6 : {eng: "section_2_family_system_consciousness_total", fr: "", max:25},
+    L7 : {eng: "section_2_family_system_consciousness_percentage", fr: "", max:0},
+    L8 : {eng: "section_2_power_giving_total", fr: "", max:140},
+    L9 : {eng: "section_2_power_giving_percentage", fr: "", max:0},
+    L10 : {eng: "section_2_perception_of_love_total", fr: "", max:150},
+    L12 : {eng: "section_2_perception_of_love_percentage", fr: "", max:0},
+    L13 : {eng: "section_2_sexual_safety_awareness_total", fr: "", max:85},
+    L14 : {eng: "section_2_sexual_safety_awareness_percentage", fr: "", max:0},
+
+    L15 : {eng: "section_2_female_safety_awareness_total", fr: "", max:30},
+    L16 : {eng: "section_2_female_safety_awareness_percentage", fr: "", max:0},
+    L17 : {eng: "section_2_perceived_spousal_safety_total", fr: "", max:70},
+    L18 : {eng: "section_2_perceived_spousal_safety_percentage", fr: "", max:0},
+
+  };
+
+  profileSpec = {
+    /* "sample" determines some important info about the sample and profile */
+    /* Default prerequisites: 1. gender, 2. age, 3. education */
+    /* "prerequisites" is synonym to "fields" in our program */
+    sample: {
+      name: "پرسشنامه تعامل همسران - فرم خانم‌ها" /* Name of the sample */,
+      multiProfile: false /* Whether the sample has multiple profiles or not */,
+      questions: true /* Determines whether to get questions from inital dataset or not */,
+      defaultFields: true /* Determines whether to have default prerequisites in the profile or not */,
+      fields: [] /* In case you want to get some additional fields and show in the profile */,
+    },
+    /* "profile" determines the dimensions of the drawn profile (to be used in svg tag viewbox) */
+    /* calculating its dimensions carefully is of great importance */
+    profile: {
+      get dimensions() {
+        return {
+          width: 851 + 2 * this.padding.x,
+          height: 676 + 2 * this.padding.y,
+        };
+      },
+      padding: {
+        x: 26,
+        y: 20,
+      },
+    },
+    /* "labels" part which has to be provided for each profile */
+    labels: Object.values(this.labels),
+  };
+
+  constructor(dataset, options, config = {}) {
+    super();
+    this._init(dataset, options, config);
+  }
+  f4 (data){
+    const {
+      spec: { parameters: spec },
+      dataset,
+    } = this;
+    const rawSpec = {
+      maxValue: data.label.max,
+      circle: {
+        R: 55,
+        r: 55 * .65,
+        angles: {
+          start: FS.toRadians(-90),
+          end: FS.toRadians(180),
+        },
+        direction: false,
+        get totalAngle() {
+          return this.direction
+            ? 2 * Math.PI - (this.angles.end - this.angles.start)
+            : this.angles.end - this.angles.start;
+        },
+      }
+    }
+    return {
+      rawSpec,
+      mark: data.mark,
+      percentage: Math.round(data.percentage * 100),
+      zeta: (data.mark / rawSpec.maxValue) * rawSpec.circle.totalAngle + rawSpec.circle.angles.start,
+    };
+  }
+  firstPage(){
+    const {
+      spec: { parameters: spec },
+      dataset,
+    } = this;
+
+    const raw = {'negative': [[], [], [], [], []], 'positive': [[], [], [], [], []]};
+    const itemOptions = {
+        negative: [
+            {
+                color : "#737373",
+                bg : "#FAFAFA",
+                opacity : 1
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.03
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.06
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.1
+            },
+            {
+                color : "#991B1B",
+                bg : "#DC2626",
+                opacity : 0.15
+            }
+        ],
+        positive: [
+            {
+                color : "#78716C",
+                bg : "#FAFAF9",
+                opacity : 1
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.03
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.06
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.1
+            },
+            {
+                color : "#166534",
+                bg : "#16A34A",
+                opacity : 0.15
+            }
+        ]
+    }
+        
+    dataset.questions.slice(0, 30).forEach((row, i) => {
+        const answered = parseInt(row.user_answered)
+        const cat = firstItemCats[i]
+
+        const newRow = {
+            option: itemOptions[cat][answered],
+            value: answered,
+            label: i === 7 ? 'بی‌تفاوتی به مسئولیت‌های خانواده' :row.text
+        }
+        raw[cat][answered].push(newRow)
+    });
+    const positive = {
+        average: dataset.score[1].mark,
+        items: [...raw.positive[4],...raw.positive[3],...raw.positive[2],...raw.positive[1],...raw.positive[0]],
+        breakpoint: null
+    }
+    positive.items.forEach((item, i) => {
+        if (item.value < positive.average && !positive.breakpoint) {
+            positive.breakpoint = i
+        }
+    })
+    const negative = {
+        average: dataset.score[3].mark,
+        items: [...raw.negative[4],...raw.negative[3],...raw.negative[2],...raw.negative[1],...raw.negative[0]],
+        breakpoint: null
+    }
+    negative.items.forEach((item, i) => {
+        if (item.value < negative.average && !negative.breakpoint) {
+            negative.breakpoint = i
+        }
+    })
+    const items = dataset.score.slice(5, 14).filter((r, i) => i %2 !== 0).map((r, i) => {
+      r.percentage = Math.round(dataset.score[7 + (i*2)].mark * 100)
+      r.percentagex = dataset.score[7 + (i*2)].mark
+      return r
+    })
+    const total = dataset.score[4]
+    total.percentage = Math.round(dataset.score[5].mark * 100)
+    const f4_1 = dataset.score[14]
+    f4_1.percentage = dataset.score[15].mark
+
+    const f4_2 = dataset.score[16]
+    f4_2.percentage = dataset.score[17].mark
+    return { positive, negative, items : {
+      family: items[0],
+      love: items[1],
+      power: items[2],
+      sexual: items[3],
+    }, total, f4_1: this.f4(f4_1), f4_2: this.f4(f4_2),
+    titleAppend: ' - بانوان'
+    }
+  }
+  _calcContext() {
+    const firstPageData = this.firstPage()
+    return [firstPageData, {
+      love: 1 - firstPageData.items.love.percentagex,
+      power: 1 - firstPageData.items.power.percentagex,
+      titleAppend: firstPageData.titleAppend
+    }];
+  }
+}
+
+
+
+module.exports = JSIQ9V;

package/views/profiles/samples/JSIQ9Q_1.hbs

@@ -0,0 +1,214 @@
+{{#> layout}}
+  <defs>
+    <filter id="baseLine" x="0" y="0" width="341" height="7" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="-1"/>
+    <feGaussianBlur stdDeviation="1.5"/>
+    <feComposite in2="hardAlpha" operator="out"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_291_78418"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_291_78418" result="shape"/>
+    </filter>
+    <linearGradient id="softblue" gradientTransform="rotate(90)">
+      <stop offset="0%"  stop-color="#0284C7" stop-opacity="1" />
+      <stop offset="100%" stop-color="#BAE6FD" stop-opacity="1" />
+    </linearGradient>
+    <linearGradient id="hardblue" gradientTransform="rotate(90)">
+      <stop offset="0%"  stop-color="#1D4ED8" stop-opacity="1" />
+      <stop offset="100%" stop-color="#93C5FD" stop-opacity="1" />
+    </linearGradient>
+    {{#with f4_1}}
+      <clipPath id="rchart">
+        {{gauge rawSpec.circle.R rawSpec.circle.r (object tl=6 tr=6 bl=6 br=6) (object start=rawSpec.circle.angles.start end=rawSpec.circle.angles.end) direction fill="#F1F5F9" stroke="#E4E4E7"}}
+      </clipPath>
+    {{/with}}
+  </defs>
+  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
+    {{!-- <rect x="0" y="0" width="851" height="676" fill="red" opacity=".1" /> --}}
+    <g transform="translate(399, 0)">
+      <text text-anchor="middle" x="226" font-weight="500" font-size="16" fill="#3F3F46" dy=".78em">صفات همسر</text>
+      <g transform="translate(232, 33)">
+        <g>
+          <rect x="0" y="0" width="220" height="32" fill="#15803D" rx="4" />
+          <text text-anchor="middle" x="16" y="16" font-weight="600" font-size="14" fill="#FFFFFF" dy=".27em">{{positive.average}}</text>
+          <text text-anchor="start" x="214" y="16" font-weight="600" font-size="14" fill="#FFFFFF" dy=".27em">نگرش مثبت</text>
+        </g>
+        <g transform="translate(0, 37)">
+          {{#each positive.items}}
+            <g transform="translate(0, {{math @index '*' 29}})">
+              <rect x="0" y="0" width="220" height="24" fill="{{option.bg}}" opacity="{{option.opacity}}" rx="4" />
+              <text text-anchor="middle" x="16" y="12" font-weight="400" font-size="13" fill="{{option.color}}" dy=".27em">{{value}}</text>
+              <text text-anchor="start" x="214" y="12" font-weight="400" font-size="13" fill="{{option.color}}" dy=".27em">{{label}}</text>
+              {{#if (boolean ../positive.breakpoint '===' @index)}}
+                <line x1="0" y1="-2.5" x2="220" y2="-2.5" stroke="#16A34A" stroke-linecap="round" stroke-dasharray="4 4"/>
+              {{/if}}
+            </g>
+          {{/each}}
+        </g>
+        <line x1="33" x2="33" y1="0" y2="496" stroke-width="2" stroke="#FFFFFF" />
+      </g>
+      <g transform="translate(0, 33)">
+        <g>
+          <rect x="0" y="0" width="220" height="32" fill="#B91C1C" rx="4" />
+          <text text-anchor="middle" x="16" y="16" font-weight="600" font-size="14" fill="#FFFFFF" dy=".27em">{{negative.average}}</text>
+          <text text-anchor="start" x="214" y="16" font-weight="600" font-size="14" fill="#FFFFFF" dy=".27em">نگرش منفی</text>
+        </g>
+        <g transform="translate(0, 37)">
+          {{#each negative.items}}
+            <g transform="translate(0, {{math @index '*' 29}})">
+              <rect x="0" y="0" width="220" height="24" fill="{{option.bg}}" opacity="{{option.opacity}}" rx="4" />
+              <text text-anchor="middle" x="16" y="12" font-weight="400" font-size="13" fill="{{option.color}}" dy=".27em">{{value}}</text>
+              <text text-anchor="start" x="214" y="12" font-weight="400" font-size="13" fill="{{option.color}}" dy=".27em">{{label}}</text>
+              {{#if (boolean ../negative.breakpoint '===' @index)}}
+                <line x1="0" y1="-2.5" x2="220" y2="-2.5" stroke="#DC2626" stroke-linecap="round" stroke-dasharray="4 4"/>
+              {{/if}}
+            </g>
+          {{/each}}
+        </g>
+        <line x1="33" x2="33" y1="0" y2="496" stroke-width="2" stroke="#FFFFFF" />
+      </g>
+      <g transform="translate(38, 569)">
+        <line x1="53" y1="31" x2="333" y2="31" stroke="#E4E4E7"/>
+        <circle cx="46" cy="31" r="10" fill="#FAFAFA" />
+        <text text-anchor="middle" x="46" y="31" font-weight="400" font-size="12" fill="#52525B" dy=".27em">4</text>
+        <text text-anchor="middle" x="46" y="51" font-weight="400" font-size="12" fill="#52525B" dy=".27em">به وضوح وجود دارد</text>
+        <circle cx="119.5" cy="31" r="10" fill="#FAFAFA" />
+        <text text-anchor="middle" x="119.5" y="31" font-weight="400" font-size="12" fill="#52525B" dy=".27em">3</text>
+        <text text-anchor="middle" x="119.5" y="6" font-weight="400" font-size="12" fill="#52525B" dy=".27em">معمولا وجود دارد</text>
+        <circle cx="193" cy="31" r="10" fill="#FAFAFA" />
+        <text text-anchor="middle" x="193" y="31" font-weight="400" font-size="12" fill="#52525B" dy=".27em">2</text>
+        <text text-anchor="middle" x="193" y="51" font-weight="400" font-size="12" fill="#52525B" dy=".27em">نظری ندارم</text>
+        <circle cx="266.5" cy="31" r="10" fill="#FAFAFA" />
+        <text text-anchor="middle" x="266.5" y="31" font-weight="400" font-size="12" fill="#52525B" dy=".27em">1</text>
+        <text text-anchor="middle" x="266.5" y="6" font-weight="400" font-size="12" fill="#52525B" dy=".27em">معمولا وجود ندارد</text>
+        <circle cx="340" cy="31" r="10" fill="#FAFAFA" />
+        <text text-anchor="middle" x="340" y="31" font-weight="400" font-size="12" fill="#52525B" dy=".27em">0</text>
+        <text text-anchor="middle" x="340" y="51" font-weight="400" font-size="12" fill="#52525B" dy=".27em">اصلا وجود ندارد</text>
+
+        <text text-anchor="start" x="132" y="97" font-weight="400" font-size="12" fill="#B91C1C" dy=".27em">میانگین نگرش منفی</text>
+        <line x1="140" y1="97.5" x2="180" y2="97.5" stroke="#DC2626" stroke-linecap="round" stroke-dasharray="4 4"/>
+        <text text-anchor="start" x="339" y="97" font-weight="400" font-size="12" fill="#15803D" dy=".27em">میانگین نگرش مثبت</text>
+        <line x1="194" y1="97.5" x2="234" y2="97.5" stroke="#16A34A" stroke-linecap="round" stroke-dasharray="4 4"/>
+      </g>
+    </g>
+    <line x1="367" y1="3" x2="367" y2="676" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
+
+    <g>
+      {{#with items.family as | item |}}
+      <g transform="translate({{math 38.5 '+' (math 80.5 '*' 0)}}, 0)">
+        <text direction="ltr" x="16" y="{{math 273.5 '-' (math item.label.max '*' 1.5)}}" dy=".27em" text-anchor="middle">
+          <tspan fill="#0369A1" font-size="16" font-weight="500">{{item.mark}}</tspan>
+          <tspan fill="#475569" font-size="12" font-weight="400">/ {{item.label.max}}</tspan>
+        </text>
+        {{bar 32 (math item.label.max '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="#F1F5F9" transform="translate(32, 285)"}}
+        {{bar 32 (math item.mark '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="url(#softblue)" transform="translate(32, 285)"}}
+        <g transform="translate(0, 316)">
+          <text y="-12" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">
+            <tspan x="17.5">هشیاری نسبت به</tspan>
+            <tspan x="17.5" y=".4em">سیستم خانواده</tspan>
+          </text>
+          <g transform="translate(0, 16)">
+            <rect height="16" width="35" fill="#F0F9FF" rx="4" />
+            <text x="17.5" y="8" dy=".35em" text-anchor="middle" font-size="12" font-weight="400" fill="#0369A1">%{{item.percentage}}</text>
+          </g>
+        </g>
+      </g>
+      {{/with}}
+
+      {{#with items.love as | item |}}
+      <g transform="translate({{math 38.5 '+' (math 80.5 '*' 1)}}, 0)">
+        <text direction="ltr" x="16" y="{{math 273.5 '-' (math item.label.max '*' 1.5)}}" dy=".27em" text-anchor="middle">
+          <tspan fill="#0369A1" font-size="16" font-weight="500">{{item.mark}}</tspan>
+          <tspan fill="#475569" font-size="12" font-weight="400">/ {{item.label.max}}</tspan>
+        </text>
+        {{bar 32 (math item.label.max '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="#F1F5F9" transform="translate(32, 285)"}}
+        {{bar 32 (math item.mark '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="url(#softblue)" transform="translate(32, 285)"}}
+        <g transform="translate(0, 316)">
+          <text x="17.5" y="-12" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">مهردهی</text>
+          <rect height="16" width="35" fill="#F0F9FF" rx="4" />
+          <text x="17.5" y="8" dy=".35em" text-anchor="middle" font-size="12" font-weight="400" fill="#0369A1">%{{item.percentage}}</text>
+        </g>
+      </g>
+      {{/with}}
+
+      {{#with items.power as | item |}}
+      <g transform="translate({{math 38.5 '+' (math 80.5 '*' 2)}}, 0)">
+        <text direction="ltr" x="16" y="{{math 273.5 '-' (math item.label.max '*' 1.5)}}" dy=".27em" text-anchor="middle">
+          <tspan fill="#0369A1" font-size="16" font-weight="500">{{item.mark}}</tspan>
+          <tspan fill="#475569" font-size="12" font-weight="400">/ {{item.label.max}}</tspan>
+        </text>
+        {{bar 32 (math item.label.max '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="#F1F5F9" transform="translate(32, 285)"}}
+        {{bar 32 (math item.mark '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="url(#softblue)" transform="translate(32, 285)"}}
+        <g transform="translate(0, 316)">
+          <text x="17.5" y="-12" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">ادراک قدرت</text>
+          <rect height="16" width="35" fill="#F0F9FF" rx="4" />
+          <text x="17.5" y="8" dy=".35em" text-anchor="middle" font-size="12" font-weight="400" fill="#0369A1">%{{item.percentage}}</text>
+        </g>
+      </g>
+      {{/with}}
+
+      {{#with items.sexual as | item |}}
+      <g transform="translate({{math 38.5 '+' (math 80.5 '*' 3)}}, 0)">
+        <text direction="ltr" x="16" y="{{math 273.5 '-' (math item.label.max '*' 1.5)}}" dy=".27em" text-anchor="middle">
+          <tspan fill="#0369A1" font-size="16" font-weight="500">{{item.mark}}</tspan>
+          <tspan fill="#475569" font-size="12" font-weight="400">/ {{item.label.max}}</tspan>
+        </text>
+        {{bar 32 (math item.label.max '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="#F1F5F9" transform="translate(32, 285)"}}
+        {{bar 32 (math item.mark '*' 1.5 ) (object tl=0 tr=0 br=8 bl=8) (toRad 180) fill="url(#hardblue)" transform="translate(32, 285)"}}
+        <g transform="translate(0, 316)">
+          <text y="-12" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">
+            <tspan x="17.5">توجه ایمنی</tspan>
+            <tspan x="17.5" y=".4em">جنسی</tspan>
+          </text>
+          <g transform="translate(0, 16)">
+            <rect height="16" width="35" fill="#F0F9FF" rx="4" />
+            <text x="17.5" y="8" dy=".35em" text-anchor="middle" font-size="12" font-weight="400" fill="#0369A1">%{{item.percentage}}</text>
+          </g>
+        </g>
+      </g>
+      {{/with}}
+      
+      <g transform="translate(0, 281)" filter="url(#baseLine)">
+        <rect x="3" y="4" width="335" height="1" rx="0.5" fill="white"/>
+      </g>
+
+      <g transform="translate(7.5, 420)">
+        <text y="-14" dy=".35em" text-anchor="end" font-size="13" font-weight="400" fill="#334155">نمره کل</text>
+        <text y="-14" x="320" dy=".35em" text-anchor="start" font-size="13" font-weight="400" fill="#334155">400</text>
+        {{bar 320 20 (object tl=0 tr=10 br=10 bl=0) (toRad 0) fill="#F1F5F9" }}
+        {{bar (math total.mark '*' 0.8) 20 (object tl=0 tr=10 br=10 bl=0) (toRad 0) fill="#64748B" }}
+        <text y="36" x="{{math total.mark '*' 0.8}}" dy=".35em" text-anchor="middle" font-size="20" font-weight="500" fill="#334155">{{total.mark}}</text>
+        <text y="50" x="{{math total.mark '*' 0.8}}" dy=".35em" text-anchor="middle" font-size="12" font-weight="400" fill="#334155">%{{total.percentage}}</text>
+      </g>
+    </g>
+    <g transform="translate(270.5, 575)">
+      <text y="-60" text-anchor="end" font-size="12" font-weight="400" fill="#475569">0</text>
+      <text x="-45" y="-8" text-anchor="middle" font-size="12" font-weight="400" fill="#475569">40</text>
+      <text y="-.2em" text-anchor="middle">
+        <tspan x="0" font-size="20" font-weight="500" fill="#2563EB">{{f4_1.mark}}</tspan>
+        <tspan x="0" y=".9em" font-size="16" font-weight="400" fill="#64748B">%{{f4_1.percentage}}</tspan>
+      </text>
+      {{#with f4_1}}
+          {{gauge rawSpec.circle.R rawSpec.circle.r (object tl=6 tr=6 bl=6 br=6) (object start=rawSpec.circle.angles.start end=rawSpec.circle.angles.end) direction fill="#F1F5F9"}}
+          {{gauge rawSpec.circle.R rawSpec.circle.r (object tl=6 tr=0 bl=6 br=0) (object start=rawSpec.circle.angles.start end=zeta) direction clip-path="url(#rchart)" fill='#6183E4'}}
+      {{/with}}
+      <text y="75" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">توجه / ایمنی‌بخشی</text>
+    </g>
+    
+    <g transform="translate(92.5, 575)">
+      <text y="-60" text-anchor="end" font-size="12" font-weight="400" fill="#475569">0</text>
+      <text x="-45" y="-8" text-anchor="middle" font-size="12" font-weight="400" fill="#475569">40</text>
+      <text y="-.2em" text-anchor="middle">
+        <tspan x="0" font-size="20" font-weight="500" fill="#2563EB">{{f4_2.mark}}</tspan>
+        <tspan x="0" y=".9em" font-size="16" font-weight="400" fill="#64748B">%{{f4_2.percentage}}</tspan>
+      </text>
+      {{#with f4_2}}
+          {{gauge rawSpec.circle.R rawSpec.circle.r (object tl=6 tr=6 bl=6 br=6) (object start=rawSpec.circle.angles.start end=rawSpec.circle.angles.end) direction fill="#F1F5F9"}}
+          {{gauge rawSpec.circle.R rawSpec.circle.r (object tl=6 tr=0 bl=6 br=0) (object start=rawSpec.circle.angles.start end=zeta) direction clip-path="url(#rchart)" fill='#6183E4'}}
+      {{/with}}
+      <text y="75" text-anchor="middle" font-size="13" font-weight="400" fill="#475569">توجه / ایمنی ادراک‌شده از همسر</text>
+    </g>
+  </g>
+
+{{/layout}}