{"product_id":"pi-vision-event-analytics-kpi","title":"Event Analytics KPI+","description":"\u003c!-- START: Product Page for Event Analytics KPI+ --\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg class=\"product-hero-icon\" alt=\"Event Analytics KPI+ Product Icon\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticskpi.png?v=1772362207\" style=\"margin-bottom: 32px; float: none;\"\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eHigh-Level Visibility with Event Analytics KPI+\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003eStop digging through individual event rows. The Event Analytics KPI+ symbol is a powerful BI component that instantly calculates and displays aggregated metrics in a responsive grid of cards. Spot critical trends at a glance before diving into the details.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eAggregated Insights, Dynamically Generated\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDynamic Calculation Engine\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eValues \u0026amp; Series:\u003c\/strong\u003e Combine Values (the math) and Series (the grouping) to automatically generate multiple KPI cards from your event frames.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSummary Types:\u003c\/strong\u003e Apply powerful calculations to your numerical data, including Count, Sum, Average, Minimum, and Maximum.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSmart Formatting:\u003c\/strong\u003e Time-based properties like Event Duration are automatically formatted into easily readable timespans.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Dashboards\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eMaster Filter:\u003c\/strong\u003e Use the KPI grid as a dashboard controller. Click a card to instantly filter all other Event Analytics charts and tables on the display.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHierarchical Drilldown:\u003c\/strong\u003e Navigate deeper. Click a parent category (e.g., Asset) to animate the cards and reveal sub-categories (e.g., Root Cause).\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eTop\/Bottom N Analysis:\u003c\/strong\u003e Display only your top bad actors. Group remaining categories into a single \"Others\" card to preserve your grand total.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eFlexible Layout \u0026amp; Styling\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eAuto-Responsive Grids:\u003c\/strong\u003e Choose \"Auto\" mode to let the symbol dynamically calculate the perfect row and column count to fit your screen.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eMultistate Formatting:\u003c\/strong\u003e Change card colors based on calculated values. Apply alerts to the text, the full background fill, or an accent border.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCustom Typography:\u003c\/strong\u003e Completely customize font families, sizes, and alignments independently for the massive KPI numbers and their titles.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eThe Perfect Entry Point for Your Dashboards\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v2h-2zm0 4h2v6h-2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDowntime Summaries\u003c\/h3\u003e\n\u003cp\u003eDisplay the Total Duration of all downtime events this week as a single, massive KPI card to keep teams aligned.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14H5V8h6v7zm2 0v-7h6v7h-6z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eSafety \u0026amp; Excursion Counts\u003c\/h3\u003e\n\u003cp\u003eShow the exact Count of high-severity safety incidents or environmental limit violations for immediate awareness.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M4 10h3v7H4zM10.5 10h3v7h-3zM17 10h3v7h-3zM22 6H2V4h20v2z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eSide-by-Side Comparisons\u003c\/h3\u003e\n\u003cp\u003eMatrix your data. Compare the Average Duration of events grouped by different Assets or Root Causes right next to each other.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3 3h18v2H3zm0 4h12v2H3zm0 4h18v2H3zm0 4h12v2H3z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDashboard Controller\u003c\/h3\u003e\n\u003cp\u003eAct as the interactive header for your BI displays, letting users click a KPI to seamlessly filter the charts beneath it.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eEvent Aggregation, Summarized Instantly\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A grid of KPI cards in PI Vision showing aggregated event values.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-1.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eDynamic Card Generation\u003c\/h4\u003e\n\u003cp\u003eConfigure a Value (like Count) and a Series (like Asset) to automatically generate a distinct card for each unique category, perfectly arranged in an auto-responsive layout.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A selected KPI card glowing, acting as a master filter for the dashboard.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-filter.png?v=1772362317\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMaster Filter Dashboard Control\u003c\/h4\u003e\n\u003cp\u003eClick any card to make it glow as the active filter. It instantly broadcasts the selected category to update all other Event Analytics Charts, Pies, and Gantts on the screen.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"A drilldown view moving from a parent series to a child series.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-drilldown.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Drilldown\u003c\/h4\u003e\n\u003cp\u003eStart with a high-level view (like Assets). Click a card to animate deeper into a second Series (like Root Causes for that specific Asset), complete with a \"Drill Up\" button to navigate back.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshot-card\" style=\"text-align: start;\"\u003e\n\u003cimg alt=\"KPI cards displaying conditional formatting on the text, fill, and borders.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-2.png?v=1772362316\" style=\"margin-bottom: 16px; float: none;\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eConditional Multistate Formatting\u003c\/h4\u003e\n\u003cp\u003eApply thresholds to your values. Change the number color, fill the entire card background (with auto-contrasting text), or add a sleek colored accent border to the left side.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"KPI cards showing top 3 bad actors and an 'Others' summary card.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-events-kpi-top-n.png?v=1772362448\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eTop N \u0026amp; \"Show Others\"\u003c\/h4\u003e\n\u003cp\u003eRestrict massive lists to just the \"Top 5\" assets ranked by downtime. Group all remaining event data into an \"Others\" card so you never lose the grand total perspective.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr); \/* Changed to 2 columns *\/\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 1.5rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.2rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 0.95rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-container {\n      grid-template-columns: 1fr;\n    }\n    .screenshots-grid {\n      grid-template-columns: 1fr; \/* Reverts back to 1 column on smaller mobile screens *\/\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56076785189190,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/eventanalyticskpi.png?v=1772362207","url":"https:\/\/www.software-athlete.com\/products\/pi-vision-event-analytics-kpi","provider":"Software Athlete","version":"1.0","type":"link"}